fix(build): don't import Vue

Inspired by Vuex, the Vuetify component now exports the Vue instance that was passed in my the consumer

.eslintrc.js

@@ -79,6 +79,9 @@ module.exports = {
         'no-unused-vars': false,
         // 'typescript/no-unused-vars': 'error',
 
+        // https://github.com/eslint/typescript-eslint-parser/issues/443
+        'no-redeclare': false,
+
         'typescript/adjacent-overload-signatures': 'error',
         'typescript/member-delimiter-style': ['error', {
           delimiter: 'none'

build/webpack.prod.config.js

@@ -26,14 +26,6 @@ module.exports = merge(baseWebpackConfig, {
     libraryTarget: 'umd',
     libraryExport: 'default'
   },
-  externals: {
-    vue: {
-      commonjs: 'vue',
-      commonjs2: 'vue',
-      amd: 'vue',
-      root: 'Vue'
-    }
-  },
   module: {
     noParse: /es6-promise\.js$/, // avoid webpack shimming process
     rules: [

src/components/VBtn/VBtn.ts

@@ -1,10 +1,13 @@
 // Styles
 import '../../stylus/components/_buttons.styl'
 
-import Vue, { VNode, ComponentOptions, VNodeChildren } from 'vue'
-import { PropValidator } from 'vue/types/options'
+import { Vue } from '../Vuetify'
 import mixins from '../../util/mixins'
 
+// Types
+import { VNode, ComponentOptions, VNodeChildren } from 'vue/types'
+import { PropValidator } from 'vue/types/options'
+
 // Components
 import VProgressCircular from '../VProgressCircular'
 

src/components/Vuetify/index.js → src/components/Vuetify/index.ts

@@ -2,15 +2,22 @@ import application from './mixins/application'
 import theme from './mixins/theme'
 import icons from './mixins/icons'
 import options from './mixins/options'
-import genLang from './mixins/lang.ts'
+import genLang from './mixins/lang'
 import { consoleWarn } from '../../util/console'
 import goTo from './util/goTo'
+import { Vue as _Vue } from 'vue/types/vue'
+import { Vuetify as VuetifyPlugin } from 'types'
 
-const Vuetify = {
-  install (Vue, opts = {}) {
-    if (this.installed) return
+// Export Vue ourselves so we can use the same plugins
+export let Vue: typeof _Vue
+export type Vue = _Vue
 
-    this.installed = true
+const Vuetify: VuetifyPlugin = {
+  install (_Vue, opts = {}) {
+    if ((this as any).installed) return
+
+    (this as any).installed = true
+    Vue = _Vue
 
     checkVueVersion(Vue)
 
@@ -52,11 +59,12 @@ const Vuetify = {
         Vue.use(component)
       })
     }
-  }
+  },
+  version: __VUETIFY_VERSION__
 }
 
 /* istanbul ignore next */
-function checkVueVersion (Vue) {
+function checkVueVersion (Vue: typeof _Vue) {
   const vueDep = __REQUIRED_VUE__
 
   const required = vueDep.split('.').map(v => v.replace(/\D/g, ''))

src/components/Vuetify/mixins/theme.js → src/components/Vuetify/mixins/theme.ts

@@ -1,3 +1,5 @@
+import { VuetifyUseOptions, VuetifyTheme } from 'types'
+
 /* eslint-disable no-multi-spaces */
 const THEME_DEFAULTS = {
   primary: '#1976D2',   // blue.darken2
@@ -9,8 +11,11 @@ const THEME_DEFAULTS = {
   warning: '#FFC107'    // amber.base
 }
 
-export default function theme (theme = {}) {
+export default function theme (theme: VuetifyUseOptions['theme'] = {}): VuetifyTheme | false {
   if (theme === false) return false
 
-  return Object.assign({}, THEME_DEFAULTS, theme)
+  return {
+    ...THEME_DEFAULTS,
+    ...theme
+  }
 }

src/index.ts

@@ -1,12 +1,12 @@
 import './stylus/app.styl'
 import * as components from './components'
 import * as directives from './directives'
-import { PluginObject, VueConstructor } from 'vue'
-import { Vuetify as VuetifyPlugin, VuetifyUseOptions } from '../types'
+import { VueConstructor } from 'vue'
+import { Vuetify as VuetifyPlugin, VuetifyUseOptions } from 'types'
 
 const Vuetify: VuetifyPlugin = {
   install (Vue: VueConstructor, args?: VuetifyUseOptions): void {
-    const VuetifyComponent: PluginObject<VuetifyPlugin> = components.Vuetify
+    const VuetifyComponent: VuetifyPlugin = components.Vuetify
 
     Vue.use(VuetifyComponent, {
       components,

src/mixins/colorable.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { Vue } from '../components/Vuetify'
 
 export default Vue.extend({
   name: 'colorable',

src/mixins/positionable.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { Vue } from '../components/Vuetify'
 import { filterObjectOnKeys } from '../util/helpers'
 import { OptionsVue } from 'vue/types/vue'
 

src/mixins/registrable.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { Vue } from '../components/Vuetify'
 import { ExtendedVue } from 'vue/types/vue'
 import { consoleWarn } from '../util/console'
 

src/mixins/routable.ts

@@ -1,4 +1,5 @@
-import Vue, { VNodeData } from 'vue'
+import { Vue } from '../components/Vuetify'
+import { VNodeData } from 'vue/types'
 import Ripple from '../directives/ripple'
 
 export default Vue.extend({

src/mixins/themeable.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { Vue } from '../components/Vuetify'
 
 export default Vue.extend({
   name: 'themeable',

src/mixins/toggleable.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { Vue } from '../components/Vuetify'
 import { ExtendedVue } from 'vue/types/vue'
 
 export function factory<T extends string> (prop?: T, event?: string): ExtendedVue<Vue, { isActive: boolean }, {}, {}, Record<T, any>>

src/util/mixins.ts

@@ -1,5 +1,6 @@
 /* eslint-disable max-len, import/export */
-import Vue, { VueConstructor, ComponentOptions } from 'vue'
+import { Vue } from '../components/Vuetify'
+import { VueConstructor, ComponentOptions } from 'vue'
 
 type Component<T extends Vue> = ComponentOptions<T> | VueConstructor<T>