Removing all Vue dependencies from Laravel

The recent versions of Laravel have come with some very minor Vue dependencies out of the box. They're easy to remove, but you may have not actually tried that yet, or you might be worried you're going to leave something sitting there. So, here's a quick tip on how to remove all Vue dependencies in a new Laravel install in a few easy steps.

1. Install Laravel

laravel new my-react-project
cd my-react-project

2. Drop Vue from package.json

Here's what the devDependencies section of the default package.json looks right now:

{
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.3",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

You'll definitely want to drop this entry:

    "vue": "^2.1.10"

If you want, you can also drop Axios (a fantastic, framework-agnostic, HTTP client) and Lodash (a simple JS library providing collection support and other convenient tools augmenting JS's somewhat sparse API).

You can drop jQuery and Bootstrap-sass, if you won't be using them, and if you're not a Windows user you can drop cross-env.

Note: if you drop the cross-env dependency, you also have to remove the string "cross-env " from the beginning of each of the scripts lines (e.g. cross-env NODE_ENV=... becomes NODE_ENV=...).

So, if you wanted a brand new project that uses Mix but no other dependencies, here's what your package.json would look like:

{
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "laravel-mix": "^0.8.3"
  }
}

Once you modify your package.json file, if you're using Yarn, you'll want to update your yarn.lock file:

yarn upgrade

3. Drop the bootstrap and the sample component

In resources/assets/js/app.js, our default script requires a bootstrap and sets up a sample Vue component. Here's what it looks like right now (with comments removed):

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

If you are dropping all the other dependencies as well (Axios, jQuery, Lodash, etc.) you can just delete all the code in app.js, and delete the bootstrap (resources/assets/js/bootstrap.js) and the sample Vue component (resources/assets/js/components/Example.vue).

If you're planning to keep all the non-Vue components, you'll want to delete the Vue lines of app.js, and then modify the bootstrap. Open resources/assets/js/bootstrap.js and drop this line: window.Vue = require('vue');.

Conclusion

That's it! You've wiped all the Vue out of the app and optionally all the other dependencies.

In case you're like me and want all the other dependencies but just not Vue some times, here's a short task list for that:

1. Delete Vue from package.json
2. Delete the Vue.component(... line and the const app = new Vue({ block from resources/assets/js/app.js
3. Delete window.Vue = require('vue'); from resources/assets/js/bootstrap.js
4. Delete the resources/assets/js/components directory