How to add Vuetify?

[ajotka]

Hi! I'm trying to add the Vuetify library in 2.0.11 version, but I have few errors in dev console. I have no idea how to fix it. I was trying to add 'a-la-carte' version and 'full' version, but still the same errors.

Ps. It's a fresh installation. Theme Version: 4.0.4

// src/main.js (also I tried with src/app.js)

import Vue from "vue";

import router from "./router";
import App from "./App.vue";
import store from "./store";
import vuetify from './plugins/vuetify';
import * as types from "./store/mutation-types";

import "./assets/css/styles.css";

new Vue({
  el: "#app",
  store,
  router,
  vuetify,
  render: h => h(App),
  created() {
    this.$store.commit(types.RESET_LOADING_PROGRESS);
    this.$store.dispatch("getAllCategories");
    this.$store.dispatch("getAllPages");
  }
});

// src/plugins/vuetify.js

import Vuetify from 'vuetify';

const opts = {
    icon: {
        iconfont: 'mdi',
    }
};
Vue.use(Vuetify);

export default new Vuetify(opts);

And in src/App.vue I changed <div id="my-app" class="page-wrapper"> to <v-app id="my-app" class="page-wrapper">

==============

Errors:

[Vue warn]: Injection "theme" not found

found in

---> <VApp>
       <Anonymous>
         <Root>
ms @ index.min.bundle.js?ver=1567150614:11
index.min.bundle.js?ver=1567150614:11 

[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"

found in

---> <VApp>
       <Anonymous>
         <Root>
ms @ index.min.bundle.js?ver=1567150614:11
index.min.bundle.js?ver=1567150614:11 TypeError: Cannot read property 'dark' of undefined
    at a.isDark (index.min.bundle.js?ver=1567150614:41)
    at Co.get (index.min.bundle.js?ver=1567150614:11)
    at Co.evaluate (index.min.bundle.js?ver=1567150614:11)
    at a.isDark (index.min.bundle.js?ver=1567150614:11)
    at a.<anonymous> (index.min.bundle.js?ver=1567150614:11)
    at Co.get (index.min.bundle.js?ver=1567150614:11)
    at new Co (index.min.bundle.js?ver=1567150614:11)
    at a.e.$watch (index.min.bundle.js?ver=1567150614:11)
    at Qt (index.min.bundle.js?ver=1567150614:11)
    at Jt (index.min.bundle.js?ver=1567150614:11)

==============

What is on frontend? Blank page with WP Admin Bar. WP Query Monitor doesn't show any errors.

[EvanAgee]

Hello @ajotka adding Vuetify to this project is relatively straightforward and it actually use to be part of the core of this project. There shouldn't be anything specific to this project that makes it challenging.

[Maciejkoson]

Hello well, i did today add vuetify, i had some problems, first of all update all node packages and then start to add like they show here https://vuetifyjs.com/en/getting-started/quick-start

[ghost]

Hey @EvanAgee I am currently trying to install vuetify and I am struggling hard with webpack (at least I think it's webpack). When I follow this guide (https://vuetifyjs.com/en/getting-started/quick-start) and add all the necessary lines in webpack.config.js and then try to run npm run watch I get a long error message. As I am not an experienced user of webpack I wanted to ask if you have an idea of what could be the problem that the command isn't working anymore?! (btw. thanks for the awesome project)

Here the important part of the error message:

Thanks in advance

[EvanAgee]

@devrobinkroeker did you ever get this working?

[ghost]

@EvanAgee Unfortunately not. But I didn't give up. I'm still trying ... :) I was able to change the error message but everytime I got new ones.