Laravel & Vue Js Boilerplate

Laravel Single Page Application Using Vue 2.5, Typescript, Eslint, Babel, SCSS etc.

Features

• Easy to configure.
• Single Page
• Hot Reloading Enabled
• Laravel Complete JWT Authentication Including Forgot, Reset Password.
• Basic CRUD
• Eslint Included for enforcing coding styles.
• Custom Component and Plugin which can help developers to create their own plugins.
• Complete error handling at single place on front as well as back end.
• Axios Plugin for HTTP requests with interceptors.
• Namespaced State Management (Vuex) Implemented.

Installation

Clone this Repo

In Project Root Directory, Run

composer install

Install Node Packages

npm install

Run DB Migrations & Seeds

php artisan migrate --seed

Development Build

npm run dev

Production Build

npm run prod

Listen for Changes

npm run watch-poll

* Disable Or Delete Eslint Completely

In webpack.config.js Just Comment out or Delete the following Code

mix.webpackConfig({
   module: {
      rules: [{
         enforce: 'pre',
         exclude: /node_modules/,
         loader: 'eslint-loader',
         test: /\.(js|vue)?$/
      }]
   }
})

You can also delete all dependencies regarding eslint.

* Disable Vendor Extraction

Currently Webpack Mix generate two different files

• app.js - Application Code
• vendor.js - Vendor Libraries
• manifest.js - Webpack Configuration

In Order to Generate Single file (Disable Vendor Extraction), write add following code in webpack.config.js

mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')

Instead of

mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css').extract(['vue'])

For More Information Read Laravel Vendor Extraction

Disable Specific Rule in Eslint

To disable specific rule for eslint Open .eslintrc.js from Root Dir and add a new Rule under rules key.

e.g: To disable lint for Unused variables Just add

'vue/no-unused-vars': 'off'

Note: 'off' can be replaced with 0 (Integer)

There are two types of rules used

• Eslint Standard Rules
• Eslint Vuejs Rules