ComponentLibrary

App.vue

<template>
  <v-app>
    <v-toolbar
      fixed
      clipped-left
    >
      <v-toolbar-side-icon
        @click.stop="miniVariant = !miniVariant"
      />
      <v-toolbar-title
        v-text="title"
      />
      <v-spacer/>
    </v-toolbar>
    <v-content>
      <v-container
        fluid
      >
        <v-slide-y-transition
          mode="out-in"
        >
          <v-layout
            column
            align-center
          >
            <slot>
              <img
                :src="imageLogo"
                class="mb-5 mt-5"
              />
              <blockquote>
                &#8220;First, solve the problem. Then, write the code.&#8221;
                <footer>
                  <small>
                    <em>&mdash;John Johnson</em>
                  </small>
                </footer>
              </blockquote>
            </slot>
          </v-layout>
        </v-slide-y-transition>
      </v-container>
    </v-content>
    <cgi-footer />
  </v-app>
</template>

<script>
import CgiFooter from './CgiFooter'

const sidebarNavigation = [
  {
    icon: 'home',
    title: 'Home',
    href: '/',
  },
]

const data = {
  clipped: true,
  drawer: true,
  sidebarNavigation,
  miniVariant: true,
}

// @vue/component
export default {
  props: {
    title: {
      type: String,
      default: 'Vuetify.js child component library',
    },
    imageLogo: {
      type: String,
      default: 'https://picsum.photos/150/180/?random&blur'
    }
  },
  data: () => ({
    ...data,
  }),
  components: {
    CgiFooter,
  },
}
</script>

CgiFooter.vue

<template>
  <v-footer
    app
    fixed
    height="auto"
    :class="[classNames]"
  >
    <v-layout
      row
      wrap
      justify-center
    >
      <slot />
      <v-flex
        xs12
        py-3
        text-xs-center
      >
        <a
          :href="productUrl"
        >
          {{ productName }}
        </a>
        &nbsp;
        &copy;
        &nbsp;
        2016-{{ year }}
        &nbsp;
        <a
          :href="publisherUrl"
        >
          {{ publisherName }}
        </a>
      </v-flex>
    </v-layout>
  </v-footer>
</template>

<script>

const classNames = [
  'grey',
  'lighten-4',
  'elevation-4',
]

// @vue/component
export default {
  props: {
    productName: {
      type: String,
      default: 'CGI Unify360',
    },
    productUrl: {
      type: String,
      default: 'https://www.cgi.com/en/solutions/cgi-unify360',
    },
    publisherName: {
      type: String,
      default: 'CGI',
    },
    publisherUrl: {
      type: String,
      default: 'https://www.cgi.com/',
    }
  },
  data: () => ({
    year: 2018,
    classNames,
  }),
}
</script>

index.js

require('../node_modules/vuetify/src/stylus/app.styl')

import Vue from 'vue'

import {
  Vuetify,
  VApp,
  VNavigationDrawer,
  VFooter,
  VList,
  VBtn,
  VIcon,
  VGrid,
  VToolbar,
  transitions
} from 'vuetify'

import App from './App.vue'
import CgiFooter from './CgiFooter.vue'

const components = {
  App,
  CgiFooter,
}

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VList,
    VBtn,
    VIcon,
    VGrid,
    VToolbar,
    transitions
  },
  theme: {
    primary: '#ee44aa',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107'
  }
})

new Vue({
  el: '#app',
  render: h => h(App),
  components
})

package.json

{
  "name": "vuetifyjs-a-la-carte",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Renoir Boulanger <hello@renoirboulanger.com>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --host=0.0.0.0",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "devDependencies": {
    "vuetify": "^1.0.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-imports": "^1.4.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-2": "^6.24.1",
    "bili": "^3.0.4",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.5.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

tasks.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [
        "$eslint-compact"
      ]
    },
    {
      "type": "npm",
      "script": "build",
      "problemMatcher": [
        "$eslint-compact"
      ]
    }
  ]
}

• https://next.vuetifyjs.com/en/guides/a-la-carte
• https://github.com/vuetifyjs/a-la-carte/blob/master/template/package.json
• https://github.com/egoist/bili
• https://github.com/egoist/poi
• https://github.com/egoist/vue-final-form/blob/master/package.json#L10-L22
• https://egoist.moe/vue-final-form/