vuetify란?

공식 사이트 에서는 모든 사용자에게 풍부한 웹 개발 체험을 전달하는 "one of the most popular JavaScript frameworks in the world"라고 주장하고 있다.
정기적인 update나 서포트도 실시하고 있는 모양.

다른 vue.js 프레임 워크와의 비교 표는 아래와 같습니다. 꽤 매력적인 라이브러리인 것 같습니다.



만마와 공식의 캐치 불평에 얽힌 느낌은 합니다만, 그럼 사용해 보지 않을까 생각하고 자신의 공부용으로 작성한 web어플에 도입해 보았습니다. (laravel+vue+docker)

도입 방법

한화 휴제, 본제의 도입 방법입니다만, 기본 공식 페이지의 방법에 따라서 간단하게 인스톨 할 수 있습니다만, 비망록도 겸해 아래에 순서를 기재합니다.
(* 참고로 내 환경은 laravel6.6.2입니다.)

1.npm에서 vuetify 다운로드

npm install vuetify

npm install sass sass-loader fibers deepmerge -D

2.src/resources/js/app.js에 다음을 추가

src/resources/js/app.js

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

const app = new Vue({
    el: '#app',  
    vuetify: new Vuetify()
});

이것뿐입니다.

시험에 Example-component 내에, 공식에 있는 [cards] 컴퍼넌트를 샘플 그대로 도입해 보겠습니다.

src/resources/js/components/ExampleComponent.vue

<v-app>
<template>
  <v-card
    class="mx-auto"
    max-width="400"
  >
    <v-img
      class="white--text align-end"
      height="200px"
      src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
    >
      <v-card-title>Top 10 Australian beaches</v-card-title>
    </v-img>

    <v-card-subtitle class="pb-0">Number 10</v-card-subtitle>

    <v-card-text class="text--primary">
      <div>Whitehaven Beach</div>

      <div>Whitsunday Island, Whitsunday Islands</div>
    </v-card-text>

    <v-card-actions>
      <v-btn
        color="orange"
        text
      >
        Share
      </v-btn>

      <v-btn
        color="orange"
        text
      >
        Explore
      </v-btn>
    </v-card-actions>
  </v-card>
</v-app>
</template>