Removing all Vue dependencies from Laravel in 4 steps

A vue file typically contains template, script, style, and some custom Html blocks. The point to note is that it can contain only one template and script blocks each. A vue-loader parses these individual blocks of code and assembles them in a common Vue.js object. The language need not be a default like the CSS as it can be mentioned in the lang attribute of the tag definition. You can alternatively include the specific files for template, script, and style by specifying the source file in the src attribute.

Vue is considered helpful when there’s a need for custom tags with many attributes. Further, since vue is based on Javascript, you can use it to store the script with ajax calls and data binding. Javascript is widely used on websites for clients as well as server-side scripting.

Removing the Vue dependencies

The first question that might arise is, why do you actually need to remove the vue dependency? Though Vue is considered useful in certain circumstances, it usually adds some load which can be avoided with other elements like map or simple if. Those are just 2 examples. There are more alternatives for the vue components that function far better, which is why removing the minor vue dependencies that come with Laravel is advised.

Removing the Vue dependencies from Laravel is very simple and can be done in just 4 steps. Here’s how you can do it:

Step 1:

We start with the package.json file which contains all the dependencies and other important configurations. In package.json the devDependencies section is where the vue is mentioned. We have to find the mention of the vue version and remove it. If you check closely, there are more dependencies like jquery, boostrap-sass, axios dependencies mentioned here which also can be removed if they are not used. It will help reduce the load.

Step 2:

Open the app.js file in resources/assets/js/ folder. In this file, a sample vue component is set as below:

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

const app = new Vue({

   el: '#app'}

This is the default code in app.js which you have to remove.

Step 3:

Open the bootstrap.js file in resources/assets/js/ folder. Here you just have to remove the line window.Vue = require(‘vue’);

Step 4:

Finally, delete the resources/assets/js/components directory. Once you have completed these four steps, you have successfully removed all Vue dependencies from Laravel!

Talk to our IT Professionals

Other Blogs:

• Pros and cons of using Laravel with Vue js

• Partnering for success:  Best Laravel Solutions Provider

• An insight into the Laravel app development associated services