Обзор

Будучи составной частью, Vuetify будет всегда расти. В зависимости от вашего проекта может потребоваться небольшой размер пакета. Система A la carte позволяет вам выбирать, какие компоненты необходимо импортировать, сильно уменьшить размер сборки. Если у вас уже установлен шаблон a-la-carte, вы можете перейти к руководству.

Импорт компонентов

Tree shaking only works with webpack 4 in production mode

Пакет transform-import не нужен для использования компонентов a-la-carte, но упрощает процесс их импорта и поэтому рекомендуется. Это позволяет использовать более сжатый синтаксис при импорте компонентов.

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

Если вы не используете пакет transform-import, вам нужно будет импортировать каждый компонент следующим образом:

Требуемые стили

Чтобы получить все необходимые стили, нам нужно импортировать их в stylus. Для того, чтобы webpack справился с этим, вам нужно будет установить stylus и stylus-loader из npm.

Теперь вам нужно будет подключить stylus в точки входа вашего приложения. Это то же место, где вы импортируете Vue и Vuetify (обычно main.js или app.js). Имейте в виду, что это требование в главном App.vue может вызвать медленное время загрузки, поскольку оно повторно обрабатывается при создании обновлений.

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.

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

Limitations

When using the vuetify-loader, there are a few scenarios which will require manual importing of components.

Dynamic components

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

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

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 wherever the custom component is used.

Edit this page | language on Github