laravel-frontend-presets/laravel-vuetify

A Vuetify frontend preset for the Laravel Framework

Sorry no time to mantain this package: if anyone is interested to mantain it please email me at sergiturbadenas at gmail.com

Laravel 5.5+ Frontend preset for Vuetify with Vuex

A Laravel front-end scaffolding preset for Vuetify - a Material Design Component Framework with Vue and Vuex.

Usage

1. Fresh install Laravel 5.5+ and cd to your app: laravel new app && cd app
2. Install this preset via composer require laravel-frontend-presets/vuetify. Laravel 5.5+ will automatically discover this package. No need to register the service provider.
3. Use php artisan preset vuetify for the basic Vuetify frontend preset OR use php artisan preset vuetify-auth for the basic preset auth scaffolding in one go. (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in routes/web.php)
4. npm install
5. npm run dev
6. Configure your favorite database (mysql, sqlite etc.)
7. php artisan migrate to create basic user tables.
8. This packages requires Laravel Passport. Run php artisan passport:install
9. php artisan serve (or equivalent) to run server and test preset.

Demo site:

• https://laravel-vuetify.acacha.org

laravel-vuetify's Issues

Laravel version in composer.json

In readme file, laravel minimum version is +5.5 but in composer is ^5.6.
Please correct laravel version on composer.json.

Cannot Login and vuejs errores

Login options doesn't appear and I have a lot of vue errors od components that it was not mounted.

Demo site not working correctly.

I really like the idea of this repo and I am currently setting it up on my local.
I took a quick look at the demo site to see how it looked, and it seems not to be working.

'php artisan preset vuetify' cause npm run error .

Hi.

After setting preset npm error comes following..

cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

sh: cross-env: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/binggle/.npm/_logs/2018-11-30T01_13_24_282Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: npm run development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

Cause this package is so good starting point, I wish it is been fixed so soon..

Site does not work after logging in

I installed this locally and home page works fine. However after registering and logging in, the css and side bar links are all messed up (see screenshot).

Ideas on Vuetify V2+

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

Support for Laravel 6

It would be great if this supported Laravel 6