Setup: Install Breeze and ESLint

With every new project, the first part is usually set up and settings configuration. In this lesson, we will install Laravel Breeze Vue version and configure Linters for code styling and formatting.

Setup a new project and navigate to the project's directory:

laravel new course-food-delivery
cd course-food-delivery/

Do not forget to set up your database credentials in your .env file.

Install Laravel Breeze

We install Laravel Breeze starter kit.

composer require laravel/breeze

We choose Vue version of Breeze with Inertia. Let's run breeze:install with vue argument:

php artisan breeze:install vue

After running a lot of commands in the background, it should bring us Laravel homepage, with this screen after you click Register in the top-right.

Of course, registration doesn't work yet, because we haven't run migrations, but we will take care of that in the next lesson, when setting up roles and permissions.

Install/Configure ESLint

While this is not a requirement, but I do advise to use Linters. They provide consistent code styling and formatting for your Vue and JS files.

While ESLint is a relatively easy requirement for the project, ha ESLint is installed with Prettier via npm command:

npm install --save-dev \
    @rushstack/eslint-patch \
    @vue/eslint-config-prettier \
    eslint \
    eslint-plugin-vue \
    prettier

Configure ESLint

Now let's define our configuration for ESLint and Prettier.

Create a new .eslintrc.cjs file in your project directory:

.eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
 
module.exports = {
  root: true,
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier'],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off',
    'no-undef': 'off'
  }
}

Here we have some rules for ESLint:

The first two rules are specifically for production builds.

• no-console - In JavaScript that is designed to be executed in the browser, it’s considered a best practice to avoid using methods on console. Such messages are considered to be for debugging purposes and, therefore, not suitable to ship to the client. Generally, calls using console should be stripped before being pushed to production.
• no-debugger - The debugger statement tells the executing JavaScript environment to stop execution and start up a debugger at the current point in the code. This has fallen out of favor as a good practice with the advent of modern debugging and development tools. Production code should not contain a debugger, which will cause the browser to stop executing code and open an appropriate debugger.
• vue/multi-word-component-names - by default, creating component names using at least two words like MyComponent is suggested, but some Inertia components are single-worded, so we do not want false positive warnings. However, it is acceptable to turn off this rule.
• no-undef - a similar reason to turn off undefined functions and variables warning. Some parts are available globally that the linter is unaware of when using the Laravel Breeze starter kit with Vue and Inertia stack.

Create a new .prettierrc.json file in your project directory.

.prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

These are code formatting rules. You may adjust them to your taste. More options can be found in official Prettier documentation.

And finally, define the lint command to your package.json file. The new line is highlighted.

package.json

"type": "module",
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint ./ --ext .vue,.js,.cjs --fix --ignore-path .gitignore" 
},
"devDependencies": {
    "@inertiajs/vue3": "^1.0.0",

Run ESLint

To format all files and have a consistent code style in your project, run this npm command:

npm run lint