Vuetify: [Bug Report] Can't get vuetify to work with webpack

[GMartigny]

Environment

Vuetify Version: 2.0.14
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.132
OS: Windows 10

Steps to reproduce

Clone the repo and check tag v0.1.0 (minimal vue application) against tag v0.2.0 (adding vuetify through NPM)

Expected Behavior

It should be possible to install vuetify through NPM without relying on back-magic

Actual Behavior

Error "Vuetify is not properly initialized"

Reproduction Link

https://github.com/GMartigny/vuetify-test

Other comments

I know I can use vue-cli to initialise a new project, but I'm trying to understand not just create. I guess that I'm not the only one in that use-case and it could greatly improve vuetify to be able to use it with webpack with modern syntaxe.

[jacekkarczmarczyk]

Why are you importing vue from 'vue/dist/vue'?
Also even when I removed vuetify your project doesn't render anything

import Vue from "vue";
const app = new Vue({
    template: "<div>OK</div>",
}).$mount("#app");

Edit: seems that it works when I import from vue/dist/vue, but Vuetify seems to need import from vue

[sh7dm]

@GMartigny @jacekkarczmarczyk answered you. Please check if that fixes the issue.

[jacekkarczmarczyk]

by "it works" i meant the minified version (without vuetify)

[morficus]

I took a quick glance at this repo and the first thing that stands out is that you're using vue/dist/vue.js which is a UMD, so webpack probably doesn't transform it. Try vue/dist/vue.esm.js instead.

Or better yet, setup at alias as suggested in the guide: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

I'll try checking out your repo in more detail in the morning

[GMartigny]

Why are you importing vue from 'vue/dist/vue'?

From what I understand this is needed to work in a webpack build. The default Vue imported is "dist/vue.runtime.common.js" which is as implied the run-time package, which trigger the error "You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."

Try vue/dist/vue.esm.js instead.

Just using vue.esm.js has no impact on the result. But after setting an alias as mention in the Vue installation guide, it works !
I still have styles not being applied, but it's great progress, thanks.

If anything, I hope this issue raise the problem of diverging informations between the repo readme and the webpage guide.

[morficus]

If anything, I hope this issue raise the problem of diverging informations between the repo readme and the webpage guide.

@GMartigny diverging information between what repo and what website? the Vue repo or the Vuetify repo?

I don't think Vuetify docs should be concerned about how to setup Vue, that's already covered (in great details) by the Getting Started section of the Vue.js guide. It explains how to set stuff up manually using webpack, or using no build system at all (directly in the browser with script tags). Vue also has the Vue CLI which automates the entire project bootstrapping process.

As for the Vuetify setup guide, it actually recommends using the Vue CLI and has detailed information on how to get it setup on already existing Vue application (as the name implies, assumes you have a properly setup Vue project.... which is covered in great detail by the Vue guide).

I understand that you are going through the motions of manually configuring stuff as a learning experience. But I would invite you to read (or re-read, if you already did) the official Vue.js Guide

[GMartigny]

In the Vuetify repo readme, one can read to do:

import Vue from 'vue'
import Vuetify from 'vuetify' // Import Vuetify to your project

Vue.use(Vuetify) // Add Vuetify as a plugin

When in the Vuetify website, we can see:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify()

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

Which seams to be the right solution.

Again thanks for helping me on that.