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

Open Table of Contents

• Requirements

• Create a directory.

• Install NodeJS for npm

• Heading to your project folder.

• Clean up the file.

  • Create source files
  • Install VUEJS

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.