How to install VueJS via Laravel mix on non-laravel project?

Hey,

If you are curious to know how to use VueJS via Laravel Mix on a non-laravel project, then this tutorial will help you to figure it out. FYI, Laravel Mix supports to use on stand-alone projects.

#Table of Contents

#Requirements

• Create an empty directory called vuejs.
• npm

#Create a directory.

I just make an empty directory via the following command.

mkdir vuejs

#Install NodeJS for npm

If npm is not installed on your computer somehow, you need to install it. The installation process is simple enough. Check it out here - https://nodejs.org/en/

Once you have installed node on your machine, you should able to get the version of them via terminal.

Like so-

node -v
npm -v

#Heading to your project folder.

In the terminal, I just CD to the project folder.

cd vuejs

Then run the following command-

npm init -y

It will generate a file on the root directory called package.json.

Next, run the following command-

npm install laravel-mix --save-dev

Once done, you will see a new directory on your project called /node_modules.

Finally, you need to run this command.

cp node_modules/laravel-mix/setup/webpack.mix.js ./

It will copy the webpack.mix.js to your root directory. The file will be like so-

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

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

mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');

// Full API
// mix.js(src, output);
// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
// mix.preact(src, output); <-- Identical to mix.js(), but registers Preact compilation.
// mix.coffee(src, output); <-- Identical to mix.js(), but registers CoffeeScript compilation.
// mix.ts(src, output); <-- TypeScript support. Requires tsconfig.json to exist in the same folder as webpack.mix.js
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);
// mix.stylus(src, output);
// mix.postCss(src, output, [require('postcss-some-plugin')()]);
// mix.browserSync('my-site.test');
// mix.combine(files, destination);
// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
// mix.copy(from, to);
// mix.copyDirectory(fromDir, toDir);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public');
// mix.setResourceRoot('prefix/for/resource/locators');
// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
// mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
// mix.when(condition, function (mix) {}) <-- Call function if condition is true.
// mix.override(function (webpackConfig) {}) <-- Will be triggered once the webpack config object has been fully generated by Mix.
// mix.dump(); <-- Dump the generated webpack config object to the console.
// mix.extend(name, handler) <-- Extend Mix's API with your own components.
// mix.options({
//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
//   globalVueStyles: file, // Variables file to be imported in every component.
//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
//   purifyCss: false, // Remove unused CSS selectors.
//   terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });

#Clean up the file.

Now, let's clean up the webpack.mix.js file. Firstly I would like to clear all the comments. It will be like so-

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

mix.js('src/app.js', 'dist/')
    .sass('src/app.scss', 'dist/');

The mix will do 2 things here-

• Take the file from src/app.js and compile to dist/ directory.
• Take the file from src/app.scss and compile to dist/ directory.

#Create source files

Now, let's create two source files. I just create a /src directory and then create two empty files-

• app.js
• app.scss

Now, I need to run this command-

node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js

#Install VUEJS

Finally need to install vuejs. Run this command-

npm install vue --save

Next, you need to add the following scripts bottom of your package.json file.

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --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 --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Finally, you have to run-

npm install cross-env --save-dev

Once done, now you can use

npm run watch

or

npm run dev

You can check the code in Github Repo

Thanks.