Update to Vuetify 2.0, Laravel 6.0, Passport 8

README.md

@@ -1,20 +1,29 @@
-**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
+# Laravel 7.0+ Frontend Ui for Vuetify with Vuex
 
 A Laravel front-end scaffolding preset for [Vuetify](https://vuetifyjs.com/en/) - 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.
-9. This packages requires [Laravel Passport](https://laravel.com/docs/passport). Run `php artisan passport:install`
-8. `php artisan serve` (or equivalent) to run server and test preset.
+1. Fresh install Laravel 7.0+ and cd to your app: `laravel new app && cd app` 
+2. Install this preset via `composer require laravel-frontend-presets/vuetify`. Laravel 5.0+ will automatically discover this package. No need to register the service provider. For the moment laravel-frontend-presets/vuetify est juste available with laravel 5.0+
+4. If your need it for you laravel 7, you can add this on your composer.json 
+    ```
+    "repositories": [{ "type": "vcs", "url": "https://github.com/yagami271/laravel-vuetify" }], 
+    "require": { "laravel-frontend-presets/vuetify": "dev-master", } 
+
+    and run composer update
+    ```
+
+5. composer require laravel/ui 
+6. Use `php ui  vuetify`
+7. `composer require laravel/passport`
+8. `php artisan migrate`
+9. `php ui vuetify vuetify-auth` 
+10. `npm install`
+11. `npm run dev`
+12. Configure your favorite database (mysql, sqlite etc.)
+13. This packages requires [Laravel Passport](https://laravel.com/docs/passport). Run `php artisan passport:install`
+14. `php artisan serve` (or equivalent) to run server and test preset.
 
 ### Demo site:
 

composer.json

@@ -1,21 +1,21 @@
 {
     "name": "laravel-frontend-presets/vuetify",
-    "description": "Laravel 5.5+ Front-end preset for vuetify",
+    "description": "Laravel 7.0+ Front-end preset for vuetify",
     "keywords": ["laravel", "preset", "vuetify"],
     "license": "MIT",
     "require": {
-      "laravel/framework": "^5.7",
-      "laravel/passport": "^7.0"
+      "laravel/framework": "^7.5.2",
+      "laravel/passport": "^8.0.2"
     },
     "autoload": {
         "psr-4": {
-            "LaravelFrontendPresets\\Vuetify\\": "src/"
+            "LaravelFrontendUi\\Vuetify\\": "src/"
         }
     },
     "extra": {
       "laravel": {
         "providers": [
-          "LaravelFrontendPresets\\Vuetify\\VuetifyPresetServiceProvider"
+          "LaravelFrontendUi\\Vuetify\\VuetifyUiServiceProvider"
        ]
       }
     }

src/VuetifyPresetServiceProvider.php

@@ -1,16 +1,16 @@
 <?php
 
-namespace LaravelFrontendPresets\Vuetify;
+namespace LaravelFrontendUi\Vuetify;
 
 use Illuminate\Support\ServiceProvider;
-use Illuminate\Foundation\Console\PresetCommand;
+use Laravel\Ui\UiCommand;
 
 /**
  * Class VuetifyPresetServiceProvider.
  *
- * @package LaravelFrontendPresets\VuetifyPreset
+ * @package LaravelFrontendUi\VuetifyUiServiceProvieder
  */
-class VuetifyPresetServiceProvider extends ServiceProvider
+class VuetifyUiServiceProvider extends ServiceProvider
 {
     /**
      * Bootstrap the application services.
@@ -19,14 +19,14 @@ class VuetifyPresetServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        PresetCommand::macro('vuetify', function ($command) {
-            VuetifyPreset::install(false);
+        UiCommand::macro('vuetify', function ($command) {
+            VuetifyUi::install(false);
             $command->info('Vuetify scaffolding installed successfully.');
             $command->comment('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
         });
 
-        PresetCommand::macro('vuetify-auth', function ($command) { //optional
-            VuetifyPreset::install(true);
+        UiCommand::macro('vuetify-auth', function ($command) { //optional
+            VuetifyUi::install(true);
             $command->info('Vuetify scaffolding with Auth views installed successfully.');
             $command->comment('Please run "npm install && npm run dev && php artisan passport:install" to compile your fresh scaffolding.');
         });

src/VuetifyPreset.php → src/VuetifyUi.php

@@ -1,17 +1,15 @@
 <?php
 
-namespace LaravelFrontendPresets\Vuetify;
+namespace LaravelFrontendUi\Vuetify;
 
 use Illuminate\Support\Arr;
 use Illuminate\Filesystem\Filesystem;
-use Illuminate\Foundation\Console\Presets\Preset;
-
 /**
- * Class VuetifyPreset.
+ * Class VuetifyUi.
  *
- * @package LaravelFrontendPresets\VuetifyPreset
+ * @package LaravelFrontendUi\VuetifyUi
  */
-class VuetifyPreset extends Preset
+class VuetifyUi
 {
     /**
      * Install the preset.
@@ -34,6 +32,49 @@ public static function install($withAuth = false)
         static::removeNodeModules();
     }
 
+
+
+    /**
+     * Update the "package.json" file.
+     *
+     * @return void
+     */
+    protected static function updatePackages()
+    {
+        if (! file_exists(base_path('package.json'))) {
+            return;
+        }
+
+        $packages = json_decode(file_get_contents(base_path('package.json')), true);
+
+        $packages['devDependencies'] = static::updatePackageArray(
+            $packages['devDependencies']
+        );
+
+        ksort($packages['devDependencies']);
+
+        file_put_contents(
+            base_path('package.json'),
+            json_encode($packages, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT).PHP_EOL
+        );
+    }
+
+    /**
+     * Remove the installed Node modules.
+     *
+     * @return void
+     */
+    protected static function removeNodeModules()
+    {
+        tap(new Filesystem, function ($files) {
+            $files->deleteDirectory(base_path('node_modules'));
+
+            $files->delete(base_path('yarn.lock'));
+        });
+    }
+
+
+
     /**
      * Update package array.
      *
@@ -43,9 +84,11 @@ public static function install($withAuth = false)
     protected static function updatePackageArray(array $packages)
     {
         return array_merge([
-            'vuetify' => '^1.0',
+            'vuetify' => '^2.1.13',
             'gravatar' => '^1.0',
-            'vuex' => '^3.0',
+            'vue' => '^2.6.10',
+            'vue-template-compiler' => '^2.6.10',
+            'vuex' => "^3.1.2",
         ], Arr::except($packages, [
             'bootstrap',
             'bootstrap-sass',

src/vuetify-stubs/js/app.js

@@ -1,4 +1,4 @@
-
+import Vuetify from 'vuetify'
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes Vue and other libraries. It is a great starting point when
@@ -15,9 +15,9 @@ window.Vue = require('vue');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('login-button', require('./components/LoginButtonComponent.vue'));
-Vue.component('register-button', require('./components/RegisterButtonComponent.vue'));
-Vue.component('snackbar', require('./components/SnackBarComponent.vue'));
+Vue.component('login-button', require('./components/LoginButtonComponent.vue').default);
+Vue.component('register-button', require('./components/RegisterButtonComponent.vue').default);
+Vue.component('snackbar', require('./components/SnackBarComponent.vue').default);
 
 window.Vuetify = require('vuetify');
 Vue.use(Vuetify)
@@ -35,5 +35,6 @@ if (window.user ) {
 
 const app = new Vue({
     el: '#app',
-    store
+    store,
+    vuetify: new Vuetify()
 });

src/vuetify-stubs/resources/js/app.js

@@ -1,4 +1,4 @@
-
+import Vuetify from 'vuetify'
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes Vue and other libraries. It is a great starting point when
@@ -15,12 +15,12 @@ window.Vue = require('vue');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('login-button', require('./components/LoginButtonComponent.vue'));
-Vue.component('register-button', require('./components/RegisterButtonComponent.vue'));
-Vue.component('remember-password', require('./components/RememberPasswordComponent.vue'));
-Vue.component('reset-password', require('./components/ResetPasswordComponent.vue'));
-Vue.component('snackbar', require('./components/SnackBarComponent.vue'));
-Vue.component('gravatar', require('./components/GravatarComponent.vue'));
+Vue.component('login-button', require('./components/LoginButtonComponent.vue').default);
+Vue.component('register-button', require('./components/RegisterButtonComponent.vue').default);
+Vue.component('remember-password', require('./components/RememberPasswordComponent.vue').default);
+Vue.component('reset-password', require('./components/ResetPasswordComponent.vue').default);
+Vue.component('snackbar', require('./components/SnackBarComponent.vue').default);
+Vue.component('gravatar', require('./components/GravatarComponent.vue').default);
 
 window.Vuetify = require('vuetify');
 Vue.use(Vuetify)
@@ -40,6 +40,7 @@ if (window.user) {
 const app = new Vue({
   el: '#app',
   store,
+  vuetify: new Vuetify(),
   mixins: [ withSnackbar ],
   data: () => ({
     drawer: null,

src/vuetify-stubs/resources/js/components/LoginButtonComponent.vue

@@ -4,7 +4,10 @@
             v-model="showLogin"
             persistent max-width="500px"
             :fullscreen="$vuetify.breakpoint.xsOnly">
-        <v-btn color="primary" dark slot="activator">Login</v-btn>
+
+      <template dark v-slot:activator="{ on }">
+        <v-btn color="primary" v-on="on" >Login</v-btn>
+      </template>
 
         <v-card>
             <v-card-title>
@@ -68,7 +71,8 @@
                 <v-spacer></v-spacer>
             </v-card-actions>
         </v-card>
-    </v-dialog>
+    </v-dialog
+            v-show="show">
 </template>
 
 <style scoped>

src/vuetify-stubs/resources/js/components/RegisterButtonComponent.vue

@@ -4,7 +4,9 @@
             v-if="show"
             v-model="showRegister"
             persistent>
-        <v-btn slot="activator">Register</v-btn>
+      <template v-slot:activator="{ on }">
+        <v-btn v-on="on">Register</v-btn>
+      </template>
         <v-card>
             <v-card-title>
                 <span class="headline">User registration</span>
@@ -70,7 +72,7 @@
             </v-card-text>
             <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" flat @click.native="showRegister = false">Close</v-btn>
+                <v-btn color="blue darken-1" text @click.native="showRegister = false">Close</v-btn>
                 <v-btn :loading="registerLoading" color="blue darken-1" class="white--text" @click.native="register">Register</v-btn>
             </v-card-actions>
         </v-card>

src/vuetify-stubs/resources/sass/app.scss

@@ -21,4 +21,6 @@
 .pace .pace-activity {
   border-top-color: #0D47A1;
   border-left-color: #0D47A1;
-}
+}
+
+@import '~vuetify/dist/vuetify.min.css';