Ideas on Vuetify V2+

[Monsterhulk]

Hi @acacha,

as i don t know how to contribute nor to fork a git repo i d like to "paste" in my ideas here.

To get this preset to work with the latest stable vue // vuetify releases here are some tips. Maybe it works for you either and anyone else can put this into this repo.

first you need a vuetify.js - file in your js - folder right next to your app.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

second you need to tweak your app.js as follows:

require('./bootstrap');
window.Vue = require('vue');
import loginButton from './components/LoginButtonComponent.vue'
import registerButton from './components/RegisterButtonComponent.vue'
import rememberPassword from './components/RememberPasswordComponent.vue'
import resetPassword from './components/ResetPasswordComponent.vue'
import snackBar from './components/SnackBarComponent.vue'
import gravatar from './components/GravatarComponent.vue'
import vuetify from './vuetify'
import store from './store'

import * as actions from './store/action-types'
import * as mutations from './store/mutation-types'
import { mapGetters } from 'vuex'
import withSnackbar from './components/mixins/withSnackbar'

if (window.user) {
  store.commit(mutations.ACCOUNT,  user)
  store.commit(mutations.LOGGED, true)
}
new Vue({
  el: '#app',
  store,
  vuetify,
  components:{
    'login-button':loginButton,
    'register-button':registerButton,
    'rememberPassword':rememberPassword,
    'reset-password':resetPassword,
    'snackbar':snackBar,
    'gravatar':gravatar,
  },
  mixins: [ withSnackbar ],
  data: () => ({
   ... like before
    ]
  }),
  methods: {
    ... like before
  }
}).$mount('#app');

at last you need to update your package.json to the following content:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18.1",
        "cross-env": "^5.2.1",
        "deepmerge": "^4.0.0",
        "fibers": "^4.0.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.22.12",
        "sass-loader": "^7.0.0",
        "vue": "^2.6.10",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "gravatar": "^1.8.0",
        "laravel-mix": "^4.1.4",
        "node-sass": "^4.12.0",
        "vue-axios": "^2.1.4",
        "vue-router": "^3.1.3",
        "vuetify": "^2.0.17",
        "vuex": "^3.1.1"
    }
}

and don t forget to

rm -rf node_modules

and

rm -rf package-lock.json

before

npm install

as a side note i needed to install cross-env globaly to get rid off some errors.

Hope this helps anyone who struggled like me to get this working with vuetify 2+

Regards Moebius