Vuetify: [Bug Report] Vuetify is undefined in A La Carte mode

[cawa-93]

Versions and Environment

Vuetify: 1.0.5
Vue: 2.5.13
Browsers: Chrome 65.0.3325.146
OS: Windows 10

Steps to reproduce

import Vue from 'vue';
import {
  Vuetify,
  VApp,
} from 'vuetify';

console.log(Vuetify) // undefined

Vue.use(Vuetify, { components: {VApp} }); // Uncaught TypeError: Cannot read property 'install' of undefined

[nekosaur]

Are you using the transform-imports babel plugin? If not you need to do this

import Vuetify from 'vuetify/es5/components/Vuetify'
import VApp from 'vuetify/es5/components/VApp'

[KaelWD]

You must provide a reproduction environment. As @nekosaur said, you're probably just missing a plugin.

[uris-dev]

I have the same problem with ES6 imports (Typescript + webpack, no time to create a full project to reproduce, so I add a comment here): according the release notes from 1.0.2 a change in the Vue prototype bind "may break commonjs imports, you will have to replace require('vuetify').default with require('vuetify')".
I had import Vuetify from 'vuetify' and, after bisecting, exactly from v. 1.0.2 that does not work anymore. I could not figure out how to do the import with the es6 syntax, but const Vuetify = require('vuetify'); does the job. Would be nice to know what is the right es6 import syntax (import {Vuetify} from 'vuetify' does not work)

[bharath063]

@cawa-93
Try doing
yarn add --dev babel-plugin-transform-imports

and in .babelrc of project's root, add the following to the list of plugins

[
      "transform-imports",
      {
        "vuetify": {
          "transform": "vuetify/es5/components/${member}",
          "preventFullImport": true
        }
      }
]

Here's how my .babelrc looks like:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "transform-imports",
      {
        "vuetify": {
          "transform": "vuetify/es5/components/${member}",
          "preventFullImport": true
        }
      }
    ]
  ]
}

[XanderLuciano]

Without using a .babelrc file:

nuxt.config.js

export default {
  /* Headers of the page */
  head: {
    title: '{{ name }}',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '{{ description }}' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
    ]
  },
  plugins: [ '~/plugins/vuetify.js' ],
  css: [ '~/assets/style/app.styl' ],

  /* Customize the progress bar color */
  loading: { color: '#3B8070' },

  /* Build configuration */
  build: {
    transpile: [/^vuetify/],
    babel: {
      plugins: [
        ['transform-imports', {
          'vuetify': {
            'transform': 'vuetify/es5/components/${member}',
            'preventFullImport': true
          }
        }]
      ]
    },
    extractCSS: true,

    /* Run ESLint on save */
    extend (config, {isDev}) {
      if (isDev && process.client) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      if (process.server) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/]
          })
        ]
      }
    }
  }
}

[KaelWD]

From vuetify 1.3 we recommend using vuetify-loader and webpack 4 instead of transform-imports.