johnleider

Overview

Being a component framework, Vuetify will always grow horizontally. Depending on your project, a small package size may be a requirement. The A la carte system enables you to pick and choose which components to import, drastically lowering your build size. If your project is using the vue-cli-plugin-vuetify plugin, this is automatically handled for you.

Tree shaking only works with webpack 4 in production mode

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-loaderwill 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 DO NOT need to do this if you are using the Vuetify plugin.

johnleider

<template>
  <div>
    <v-container
      grid-list-xs
      mb-5
      ma-auto
    >
      <v-layout>
        <v-flex
          v-for="n in 20"

johnleider

I added a file in assets/style/main.sass file content: @import 'vuetify/src/styles/main.sass'

in file: nuxt.config.js:

before: css: ['~/assets/style/app.styl'],

johnleider

<template>
  <v-app>
    <v-content>
      <v-container >
        <v-app-bar app>
          <v-app-bar-nav-icon id="nav">
          </v-app-bar-nav-icon>
        </v-app-bar>
        <v-layout row wrap justify-center>
          <v-flex xs6 text-xs-center>

johnleider

<template>
  <div class="pa-5">
    <v-expansion-panel :value="2" class="mb-3">
      <v-expansion-panel-content
        v-for="(item,i) in 5"
        :key="i"
      >
        <template v-slot:header>
          <div>Item</div>
        </template>

johnleider

<template>
  <v-card max-width="400" class="mx-auto">
    <v-toolbar>
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Cart</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>

johnleider

<template>
  <v-container
    class="pa-0"
    grid-list-xl
  >
    <v-layout wrap>
      <v-flex
        v-for="n in 12"
        :key="n"
        xs4

johnleider

// src/main.js
import Vue from 'vue'
import './plugins/base'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

johnleider

<template>
  <div>
    <v-card
      class="mb-2"
      height="300"
    />

    <h2 class="title mb-2">
      I'm a text title
    </h2>

johnleider

// src/plugins/base.js
import Vue from 'vue'
import BaseCard from '@/components/base/Card'

Vue.component('base-card', BaseCard)