Installing Vue through Laravel Mix is hard

I have to tell you, I recreated another Laravel project but still experiencing the same results/problems.

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

resources/js/app.js

require('./bootstrap');

You don't require orimport Vue.

// resources/js/app.js

require('./bootstrap');
import Vue from 'vue';

new Vue({
	// ...etc
});

This shouldn't cause a failure of npm though. Whenever you run npm run dev for the first time after changing the webpack.mix.js file, does Mix install additional dependencies? You need to run npm run dev again after this setup step.

Whenever you run npm run dev for the first time after changing the webpack.mix.js file, does Mix install additional dependencies?

Maybe that's why but no it doesn't install dependencies. However if you go back to the initial post, point 2, I ran npm install if that's what you mean. The code you provided is not building or importing Vue. I get a Laravel Mix error.

ERROR in ./resources/js/app.js 4:0-22
Module not found: Error: Can't resolve 'vue' in '/Users/eduardocoello/Projects/vuecomps/resources/js'

webpack compiled with 1 error

At one point or another authentication is needed when you have a backend, I get that.. but at this point im not trying to install any of that, if it were up to me I would rather learn how to install Vue separately, though I know, at least for Breeze, you need to install it from the get-go, wouldn't want to lose any code. And I don't know about Jetstream or Inertia but Vue is a framework widely used and Inertia is brand new (I think) so I would rather also learn Vue first.

@warpig

Ok, your are just a little bit behind me :-)

~1 month ago, I succeeded to install vue3 with this cde, and when I saw it was working (ie witouh learning Vue) I decided to go via Inertia.

npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next

You ran that from a fresh installation of Laravel? Doesn't seem to work, yes I can run it and it will install something but I don't get the components folder under resources/js + if I try to import and initialize Vue Im still getting an error.

@warpig

Yes from a fresh Laravel install.

You haven't forget to run : npm install ; npm run dev

Not 100% sure, but I think that components folder is not auto created, you have to create it.

Find my webpack.mix.js et package.json to compare with yours.

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
	.vue()

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.4",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.0-beta.17",
        "lodash": "^4.17.19",
        "postcss": "^8.2.1",
        "resolve-url-loader": "^3.1.0",
        "vue": "^3.0.4",
        "vue-loader": "^16.1.1"
    },
}

Yes it is the same. After running that command I think that did that but why would the build fail if I try to import vue? that's just odd, it should've worked by now :-/

Hello @perdanjam, I have shared both of those, check the reply I wrote to @tykus if it's about compatibility, do you know where I can check for that? EDIT: I never replied those files so here you go, sorry for the mix-up! Lol

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "tailwindcss": "^2.0.3"
    }
}

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.12",
        "laravel/tinker": "^2.5"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "autoload": {
        "psr-4": {
            "App\": "app/",
            "Database\Factories\": "database/factories/",
            "Database\Seeders\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    }
}

@warpig I think you may have installed Vue in a different folder..? It's not in your package.json devDependencies. Have a look to see if you have a node_modules somewhere other than your root directory.

Delete that and navigate to your route use cd .. to go up a level in your terminal and reinstall vue

It's still unclear to me when did I actually "installed" or came close to even installing Vue, was it when I ran the npm install command? Or when I added it to the webpack file? When I did that I then ran npm run dev and that's when it started to fail. The node_modules folder exists in the app and in no other folder elsewhere :-(

Mix is a wrapper around Webpack. Its main purpose is to bundle code that you already have (usually this means making a single browser-friendly app.js file from many different .js/.vue /.whatever files).

In your case, Vue wasn't installed, so the .vue() method in Mix caused an error.

@warpig @warpig I think the easiest method to get Vue in Laravel is as explained in Laravel 7 [laravel(dot)com/docs/7.x/frontend#introduction] since this method is still valid in Laravel 9 we just have to change the version to a more current one for example:

composer require laravel/ui:^3.4

and then follow the steps described in [laravel(dot)com/docs/7.x/frontend#introduction] or in [packagist(dot)org/packages/laravel/ui] as you prefer, for example:

php artisan ui vue

later:

npm install

and finally:

npm run dev