Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

eggplantSword's avatar

Correct way to install Vue 3, inertia.js and tailwind

I've followed some tutorials without any luck I always get an error when I try to run npm run dev and basically, I've given up trying on my own to do this.

This is what I have currently

//composer.json
{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "repositories": [
        { "type": "vcs", "url": "[email protected]:sal/idp-conector.git" }
    ],
    "require": {
        "php": "^8.0.2",
        "aacotroneo/laravel-saml2": "^2.1",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^9.19",
        "laravel/sanctum": "^3.0",
        "laravel/tinker": "^2.7",
        "sal/idp-sdk": "dev-master"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^6.1",
        "phpunit/phpunit": "^9.5.10",
        "spatie/laravel-ignition": "^1.0"
    },
    "autoload": {
        "psr-4": {
            "App\": "app/",
            "Database\Factories\": "database/factories/",
            "Database\Seeders\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

//package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    }
}

//vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

//app.js
import './bootstrap';

It would be a huge help if anyone could guide me the correct way or steps to take. Thanks

0 likes
5 replies
MohamedTammam's avatar

You can just install Laravel Breeze starter kit with Vue and Inertia version. That will make everything easier.

1 like
eggplantSword's avatar

@MohamedTammam I can't use a fresh instalation since I have a custom auth setup so I'm parting from the info I posted above. Everytime I try again I run git reset --hard to reset everything how it was before and try again.

eggplantSword's avatar

@MohamedTammam This is the error I get

node:internal/errors:484
    ErrorCaptureStackTrace(err);
    ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/vagrant/gps-system/vendor/voku/portable-ascii/src/voku/helper/data/x0cb.php'
    at FSWatcher.<computed> (node:internal/fs/watchers:244:19)
    at Object.watch (node:fs:2315:34)
    at createFsWatchInstance (file:///home/vagrant/gps-system/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:49438:17)
    at setFsWatchListener (file:///home/vagrant/gps-system/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:49485:15)
    at NodeFsHandler._watchWithNodeFs (file:///home/vagrant/gps-system/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:49640:14)
    at NodeFsHandler._handleFile (file:///home/vagrant/gps-system/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:49704:23)
    at NodeFsHandler._addToNodeFs (file:///home/vagrant/gps-system/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:49946:21)
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (file:///home/vagrant/gps-system/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:51134:10)
    at NodeFsHandler._addToNodeFs (file:///home/vagrant/gps-system/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:49954:18) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/home/vagrant/gps-system/vendor/voku/portable-ascii/src/voku/helper/data/x0cb.php',
  filename: '/home/vagrant/gps-system/vendor/voku/portable-ascii/src/voku/helper/data/x0cb.php'
}

Node.js v18.12.1

Usually the error itself is always the same but the file itself will be different, and it's from a package and not anything I added or wrote myself

Please or to participate in this conversation.