CSS & JS compiled

When you use laravel-mix to compile assets like css and js, this will create files into public. Add these files to .gitignore cause of differences between minified files on local and production.

.gitignore
/public/css
/public/js
/public/mix-manifest.json

jsconfig.json

If you want to use Vue.js into Laravel with Visual Studio Code, you have to setup jsconfig.json

touch jsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "resources/js/*"
      ],
      "@Components/*": [
        "resources/js/Components/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "public"
  ],
  "vueCompilerOptions": {
    "experimentalDisableTemplateSupport": true
  }
}

ESLint

Useful with ESLint and Vue

npm i -D eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier babel-eslint

Create these files at the root of repository

touch .eslintrc.js
{
  "root": true,
  "env": {
    "node": true,
    "browser": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {},
  "parserOptions": {
    "parser": "babel-eslint"
  }
}
touch .prettierrc
.prettierrc
{
  "semi": false,
  "singleQuote": true
}
[*.{vue,js}]
indent_style = space
indent_size = 2
{
  "scripts": {
    "lint": "./node_modules/.bin/eslint resources/js/ --ext .js,.vue"
  }
}
Table of Contents