Step by Step tutorial to add Vuetify to Laravel with Auth scaffolding and Vuex

Note: Please also check the Laravel Frontend preset I have created at https://github.com/laravel-frontend-presets/laravel-vuetify see demo page here: https://laravel-vuetify.acacha.org/

First install Laravel installer then create a new Laravel project with:

$ laravel new vuetify
$ cd vuetify

Boostrap your Laravel app configuring the common initial steps like database configuration, migrations, running a php server. I’ve created a tool called llum to let me automate this steps running:

llum boot

This really executes:

 $ composer require barryvdh/laravel-ide-helper

Config .env file to use sqlite database:

#DB_CONNECTION=mysql
DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=homestead
#DB_USERNAME=homestead
#DB_PASSWORD=secret

Run database migrations:

php artisan migrate

Execute server or use Laravel Valet, Homestead or you prefered option:

php artisan serve

Welcome Page

Update welcome.blade.php using Vuetify Premade Paralax Landing Page theme:

Some relevant info:

• Original source code: https://github.com/vuetifyjs/parallax-starter/tree/master/template
• Remember to copy necessary assets (images) for Landing Page to Laravel public folder
• Add Laravel meta tag CSRF-TOKEN at html header. See Laravel docs
• Add Vuetify.css and Google Fonts in HTML header
• Use v-cloak to avoid FUOC

CSS/Sass update

Update resources/assets/sass/app.scss to:

• Remove file _variables.scss
• Add v-cloak to avoid FUOC. I also have added an SVG spinning image when loading
• We use pace.js to we configure wich type of pace we want to use.

Javascript and Vue components

In our case we decided to create a more complex welcome page that also integrates authentication using Vue components:

• login-button: Vuetify button that triggers a Vuetify Dialog for login.
• register-button: Vuetify button that triggers a Vuetify Dialog for register.
• remember-password: Vuetify Dialog that displays remember password form.
• reset-password:Vuetify Dialog that displays reset password form.
• snack-bar: Allows user to show snackbars with info or error messages.

This components are installed in Vuetify Landing Page (welcome.blade.php file):

So we need to update resources/assets/js/app.js file to:

As you can see we also added the necessary code to runs Vuetify sidebar menu.

We also update bootstrap.js:

And added to folder resources/assets/js/components the following Vue component Files:

With the following Mixins:

We also added a Vuex store folder:

With the following modules:

Auth module

Snackbar module

Users module

And a utils folder:

Also and api folder to centralize all Axios api calls using promises:

Finally update package.json file to:

“Recompile” Javascript with:

npm install && npm run dev

Laravel Authentication Scaffolding controllers

Install Laravel default Auth scaffolding:

php artisan make:auth

And register a new user in Landing page. Now it’s time to change home.blade.php and default App laravel layout. Overwrite the following files:

• resources/views/home.blade.php
• resources/views/layouts/app.blade.php

Remember that items object is defined in resources/assets/js/app.js file.

You can also remove resources/views/auth folder because all this views are already integrated as Vue components in the Landing Page.

Also we need to overwrite default Auth controllers (app/Http/Controllers/Auth folder):

• ForgotPasswordController.php
• LoginController.php
• RegisterController.php
• ResetPasswordController.php

All of them shows the Welcome/Landing Page with and action that triggers the needed dialog (login, register, remember_password or reset_password). Example:

/**
 * Show the application's login form.
 *
 * @return \Illuminate\Http\Response
 */
public function showLoginForm()
{
    return view('welcome', [
        'action' => 'login'
    ]);
}

Finally add Update User (edit profile) at routes/api.php:

Route::group(['prefix'=>'v1','middleware' => 'auth:api'], function() {
    Route::put('/user', 'LoggedUserController@update');
});

Controller app/Http/Controllers/LoggedUserController:

Test:

Laravel Passport API authentication

To avoid errors calling api with autenticated users we have to install and configure Laravel Passport.

composer require laravel/passport
php artisan migrate
php artisan passport:install

App\User class had Trait:

HasApiTokens

To AuthServiceProvider add:

Passport::routes();

at config/auth.php

And add CreateFreshApiToken middleware to Kernel.php file:

\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,

Optional step 1: Enable eslint, editorconfig

Add the following files to root folder:

• .editorconfig
• .eslintignore
• .eslintrc.js

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

.eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

.eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

Optional step 2: Enable email

To allow user to change password via email you have to active Laravel Email Configuration . For example you can use Mailtrap setting your Mailtrap username and password to .env file:

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=419784d3cd56ec356
MAIL_PASSWORD=8613c12f1305b4
MAIL_ENCRYPTION=null

Final Code

See Gihub repo: https://github.com/acacha/vuetify2

Demo site:

https://laravel-vuetify.acacha.org