Laravel Vue Inertia: Food Ordering Project Step-By-Step

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 \

Configure ESLint

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

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


/* eslint-env node */
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.


"$schema": "",
"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.


"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

$ npm run lint

lint eslint ./ --ext .vue,.js,.cjs --fix --ignore-path .gitignore

C:\wamp64\www\course-food-delivery\resources\js\Pages\Auth\ResetPassword.vue 20:14 error Getting a value from the props in root scope of <script setup> will cause the value to lose reactivity vue/no-setup-props-destructure

✖ 1 problem (1 error, 0 warnings)

After I run lint, I see this. Is it important? I think I leave it for now.


Run composer update then run npm update once you have ran both of these run npm run dev let this run for a minute or so and then run “npm run lint” this worked for me everything is working fine and all tests passed.


Not worked, for now I use /* eslint-disable */ Inside <script> in front of, ResetPassword.vue


After installing and running eslint as described, I get:

npm run lint

> lint
> eslint ./ --ext .vue,.js,.cjs --fix --ignore-path .gitignore

Oops! Something went wrong! :(

ESLint: 8.50.0

Error: Cannot read config file: /Users/user/dev/procurement/.eslintrc.cjs
Error: Cannot find module '@rushstack/eslint-patch/modern-module-resolution'
Require stack:
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/Users/user/dev/procurement/.eslintrc.cjs:2:1)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)

The file /Users/user/dev/procurement/.eslintrc.cjs exists


I decided to take this course again for a project I am working on I am using the latest Laravel 10.38.1 with breeze 1.27.0 and vue 3.3.13 and I am getting the following errors:

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

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

P.S. This is a fresh install as in mints. oh I am on a windows 11 system with xampp and php 8.2.4 if that helps. Please try for your self.


New install for: npm i eslint

latest releas v8.56.0

5 days ago

Will this work for this course ?


After following his instructions from the GitHub repository All is up and ready togo.


Is this course still valid for Laravel 11 ?