Vuetify: Quick start for existing projects

[darrennolan]

Hi!

I can't seem to be getting Vuetify working within my existing project. I'm using a base app created with vue-cli, browserify with hot reloading.

Uncaught TypeError: _vm._c is not a function

Not entirely sure what I'm doing wrong here.

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

new Vue({
    el: '#app',
    mounted() {
        this.$vuetify.init();
    },
    data: {
        item: {
            href: '#!',
            text: 'Get Started'
        }
    }
});

My main index.html is matching the structure from the example template vue init vuetifyjs/simple. It somewhat feels like the distributed package I seem to include from browserify's required (defined as dist/vuetify.js in this project's package.json) doesn't play nice.

[johnleider]

Are you running [email protected]? There was an update that had to be made as there was no compatibility with Vuetify and anything past 2.1.4, so I updated the loaders to accommodate the newer version.

[darrennolan]

Yes sorry, should have given some versions. [email protected]

I installed Vuetify only a few hours ago, so it would have picked up your latest 0.7.5 build? I'll double check the versions npm ended up installing and get back to you.

Thanks,

[johnleider]

Any updates?

[johnleider]

I'm going to assume your problem has been corrected. If not, please open another issue.

[darrennolan]

Hi sorry for the late reply. Finally getting around to properly testing again.

I can confirm with my same project/setup as before that [email protected] and [email protected] does indeed work fine.

I'm not sure what my issue was, I'm going to blame cache and call it a day.

Thanks for your quick responses @johnleider, cheers.

[gluons]

@johnleider You should add some stylesheet import in Quick Start (Existing Projects part).

import 'vuetify/dist/vuetify.min.css';

Without this, existing project will not include vuetify's stylesheet.

[exhuma]

@gluons I'm trying to get vuetify to work from an already started vuejs project (using the webpack template). So I was following the "existing projects" section. I tried adding a button, which shows up, but completely unstyled. I tried your import statement, but I'm not sure where. I added it to the style section of my App.vue file, but then I get the following error:

ERROR in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-015f9fff","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: CssSyntaxError: /data/App.vue?31ff4e8c:55:0: Unknown word
    at Input.error (/data/node_modules/postcss/lib/input.js:111:22)
    at Parser.unknownWord (/data/node_modules/postcss/lib/parser.js:468:26)
    at Parser.other (/data/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/data/node_modules/postcss/lib/parser.js:81:26)
    at parse (/data/node_modules/postcss/lib/parse.js:26:16)
    at new LazyResult (/data/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/data/node_modules/postcss/lib/processor.js:117:12)
    at loadPostcssConfig.then.config (/data/node_modules/vue-loader/lib/style-compiler/index.js:57:8)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-015f9fff","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-316 13:3-17:5 14:22-324
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

[johnleider]

You can just use https://unpkg.com/vuetify/dist/vuetify.min.css if you want.

[exhuma]

Unfortunately this does not solve the issue :( Something else must be missing from the "existing applications" section. I started with the application 3 weeks ago, so I assume most components and docs should be up-to-date?

[johnleider]

Do you have a repo I can clone?

[exhuma]

Yes. Sorry for the late reply. It's getting late over here: https://github.com/exhuma/powonline/tree/vuetify

I just pushed it to the vuetify branch

[exhuma]

... I've also noticed that events don't work anymore on vuetify based buttons (using <v-btn>. So something is clearly missing somewhere. From the quickstart page in the vuetify docs I followed the steps for existing applications. So running:

npm install vuetify --save-dev

And then adding

import Vuetify from 'vuetify'
 Vue.use(Vuetify)

to my application.

Maybe something else is not quite right yet. This is my first real JS application since the year 2003... lots has changed 😆

Another thing I noticed just now: I copied the code from the example application. This contains a <v-sidebar> element, and I get the error: Unknown custom element: <v-sidebar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[exhuma]

I've tried to create a new project using the vuetify template, and that project works. I'm currently trying to move my code from my previous (pure vuejs) application into that newly created application but now I have issues that the import statements can't find the files, even though - to the best of my knowledge - the paths look correct.

I would be happier if I could just add vuetify to my existing application instead of the other way around.

[gluons]

@exhuma My repo created by official webpack template. And I added vuetify later.

I just install by npm install --save vuetify. Then Vue.use(Vuetify);. It works fine. 😄

[gluons]

@exhuma Oh! You've imported wrong file. You can import .css file directly in main.js.

PR sent. 🎉