개요

컴포넌트 프레임웤인 Vuetify는 늘 수평적으로 확장됩니다. 프로젝트에 따라 작은 패키지 크기가 필요할 수도 있습니다. 아라카르트(A la crate) 시스템은 임포트(import) 할 컴포넌트들을 선택할 수 있게 하여 빌드 크기를 극적으로 줄여줍니다. 이미 a-la-carte 템플릿을 설치했다면 다음 가이드로 건너 뛰셔도 됩니다.

vue init vuetifyjs/a-la-carte 명령어를 사용하여 a-la-carte 템플릿을 cli 에서 설치하면 단일 컴포넌트를 임포트하는 예제 프로젝트를 볼 수 있습니다. 우리가 제공하는 다른 템플릿 중의 일부는 a-la-carte 컴포넌트들을 활성화하는 옵션을 제공하기도 합니다. 더 자세한 정보는 빠른 시작 안내를 참고하세요

컴포넌트 임포팅(importing)

transform-imports 패키지가 a-la-carte 컴포넌트에 꼭 필요한 건 아니지만 패키지들을 임포팅하는 프로세스를 간단하게 만들기 때문에 "매우" 추천합니다. 이는 컴포넌트를 임포팅할때 더 간결한 문법을 사용하게 해 줍니다.

Tree shaking only works with webpack 4 in production mode

// main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar,
  transitions
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    transitions
  },
  directives: {
    Ripple
  }
})

The options object that you pass as the second argument to Vue.use can also include both a directives and a transitions property.

transform-imports 패키지를 사용하지 않는다면 다음처럼 각 컴포넌트를 직접 임포트해야 합니다.

// .vue files
import { VCard, VCardText, VCardMedia } from 'vuetify/lib'

export default {
  components: {
    VCard,
    VCardText,
    VCardMedia
  }
}

필요한 스타일 (Required styles)

필요한 모든 스타일을 적용하려면 스타일들을 stylus 내에 임포트해야 합니다. 웹팩이 이 것을 다루기 때문에, stylusstylus-loadernpm 으로 설치해야 합니다.

$ npm install --save-dev stylus stylus-loader
# or
$ yarn add --dev stylus stylus-loader

이제 어플리케이션의 엔트리 포인트에서 stylus를 require 해야합니다. 이 엔트리 포인트는 Vue 와 Vuetify 를 임포팅한 것과 같은 파일입니다 (보통 main.jsapp.js). 메인 App.vue에서 stylus 를 require 하면 업데이트마다 다시 프로세싱되기 때문에 로딩 타임이 느려질 수 있습니다.

// src/main.js
import 'vuetify/src/stylus/app.styl'

For a more detailed explanation on how to setup your application to handle stylus, please navigate to the theme page.

vuetify-loader

Keeping track of all the components you're using can be a real chore, so we wrote a webpack loader to help you. vuetify-loader will automatically import all the vuetify components you use, where you use them. This will also make code-splitting more effective, as webpack will only load the components required for that chunk to be displayed.

// You still need to register Vuetify itself
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify)
// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ]
}

// or vue.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin()
    ]
  }
}

Now any Vuetify component used in a template will be automatically added to an in-component import like above.

Limitations

Vuetify-loader can't do everything, there are still some scenarios where you'll need to import components manually

Dynamic components

v-data-iterator can use any component via the content-tag prop. This component must be registered globally:

// SomeComponent.vue
<template>
  <v-data-iterator content-tag="v-layout">
  ...
// main.js
import Vuetify, { VLayout } from 'vuetify'

Vue.use(Vuetify, {
  components: { VLayout }
})

Dynamic components used with <component :is=""> can be registered locally:

<template>
  <component :is="button ? 'v-btn' : 'v-chip'">
  ...
</template>

<script>
  import { VBtn, VChip } from 'vuetify/lib'
  export default {
    components: { VBtn, VChip },
    data: () => ({ button: false })
  }
</script>

Functional components

Functional components are inlined at runtime by vue, and cannot have a components property in their options. Any vuetify components used in a custom functional component must either be registered globally (recommended), or locally whereever the custom component is used.

Pre-processors (pug, HAML)

Vuetify-loader currently cannot parse non-html templates such as pug. Anything used in these templates must be imported manually as above.