johnleider

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

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>
  <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-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

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>
  <div>
    <v-container
      grid-list-xs
      mb-5
      ma-auto
    >
      <v-layout>
        <v-flex
          v-for="n in 20"

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-row now provides gutter adjustments and has 3 options available -->
    <!-- v1.5 - <v-container grid-list-xl> to v2.0 - regular (nothing required) -->
    <!-- v1.5 - <v-container grid-list-md> to v2.0 - <v-row dense> -->
    <!-- v1.5 - <v-container> to v2.0 - <v-row no-gutters> -->

    <!-- v1.5 -->
    <v-container grid-list-xl>
      <v-layout>

johnleider

{"lastUpload":"2020-06-22T19:36:51.572Z","extensionVersion":"v3.4.3"}

johnleider

<template>
  <v-container fluid>
    <v-radio-group>
      <v-row>
        <v-col
          cols="12"
          sm="6"
        >
          <v-text-field
            label="Regular"