Laravel
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 todist/
directory. - Take the file from
src/app.scss
and compile todist/
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.