CODEWITHSUNDEEP
vue.jsvuetify.jsvue-cli
Holger Mueller
Holger Mueller

Reputation: 432

How do I add Vuetify 2.0 to an existing project?

I've recently upgraded from Vuetify 1.5 to Vuetify 2.0 and I'm having trouble getting it to work. I feel like I'm missing something.

I downloaded the newest Vuetify package and the @mdi/font package as well. I've followed the instructions in the docs, as far as I can tell: I've added the plugins folder with the vuetify.js file, and as far as I can tell, I've instantiated Vuetify into my Main.js file properly, but none of the stylings appear in my app. I've also tried adding a element tag to my project in various places (my App.vue file and various other page files), but all that seems to do is break things even more; I either get an element to appear on the DOM with no stylings, or the DOM comes up completely white.

Here is my vuetify.js file:

import Vue from "vue";
import Vuetify from "vuetify";
import "@mdi/font/css/materialdesignicons.css";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "mdi"
  }
});

Here is my main.js file:

import Vue from "vue";
import App from "./App.vue";
import router from "./Router";
import Vuetify from "@/plugins/vuetify";
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false;

new Vue({
  router,
  Vuetify,
  render: h => h(App)
}).$mount("#app");

Here is my App.vue file:

<template>
  <div id="app">
    <Header />
    <router-view></router-view>
    <Footer />
  </div>
</template>

<script>
import Header from "./components/Layout/Header";
import Home from "./components/Home";
import InstructorProfile from "./components/InstructorProfile";
import ClassRoster from "./components/ClassRoster";
import Footer from "./components/Layout/Footer";

export default {
  name: "app",
  components: {
    Header,
    Home,
    InstructorProfile,
    ClassRoster,
    Footer
  },
  data() {
    return {};
  }
};
</script>

As I mentioned before, I have tried adding elements to this file, both like this:

<v-app>
    <div id="app">...</div>
</v-app>

And like this:

<div id="app">
     <v-app>...</v-app>
</div>

But neither seemed to work better than the other.

I'd like to know if there's something I've left out or I've done wrong. Any help is much appreciated. Thank you in advance.

Upvotes: 7

Views: 13207

Answers (5)

Andrew
Andrew

Reputation: 20071

From the docs for Vuetify 3

Follow these steps if for example you are adding Vuetify to an existing project, or simply do not want to use a scaffolding tool.

yarn add vuetify@^3.0.0

In the file where you create the Vue application, add the following code

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(vuetify).mount('#app')

See the docs for more info.

Upvotes: 0

Holger Mueller
Holger Mueller

Reputation: 432

I just had to run: vue add vuetify.

Upvotes: 0

kenma
kenma

Reputation: 51

I fixed with

npm install vuetify-loader  vue-cli-plugin-vuetify -D

https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#questions

Upvotes: 0

millonesj
millonesj

Reputation: 379

try with this:

In vuetify.js file:

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css"; // Add this line

Vue.use(Vuetify);
const opts = {
  theme: {
    dark: false
  },
  options: {
    customProperties: true
  },
  icons: {
    iconfont: "mdi"
  }
};

export default new Vuetify(opts);

In main.js file:

import Vue from "vue";
import App from "./App.vue";
import router from "@/router";
import vuetify from "@/plugins/vuetify";

Vue.config.productionTip = false;
new Vue({
  vuetify,
  router,
  render: h => h(App)
}).$mount("#app");

Upvotes: 7

Patrice Flao
Patrice Flao

Reputation: 501

I do it this way (vue 3.9, vuetify 2.0)

In main.js

import vuetify from './plugins/vuetify'
...
new Vue({
  ...
  vuetify,
  render: h => h(App)
}).$mount('#app')

In plugins/vuetify.js

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

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',  // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
  },
  theme: {
    dark: false,
  },
  themes: {
    light: {
      primary: "#4682b4",
      secondary: "#b0bec5",
      accent: "#8c9eff",
      error: "#b71c1c",
    },
  },
})

in App.vue

<template>
  <v-app>
    ...
  </v-app>
</template>

Upvotes: 0

Related Questions