Shoud I load Vue JS manually in laravel?

Question

I have added some Vue Code in a view in a Laravel project. Do I need to include the vuejs in the layout like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>

Or laravel takes care of it in someway.

What I have tried:

I ran npm install and npm run dev and I have now app.js and app.css in the public directory.

and I have the following in the view:

const app = new Vue({
el: '#app',

data: {
  comments: {},
  post: {!! $post->toJson() !!},
  user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!},
  comment: 'Your Comment'
},
mounted(){
  this.getComments();
},
methods:{
  getComments(){
    //Some code here
  }
}
});

But when I access this view I get:

ReferenceError: Vue is not defined

score 0 · Answer 1 · answered Sep 16 '19 at 09:14

0

1- You should add your script in your index file

2- then add that vue codes in the app.js file in the resources\js\app.js

answered Sep 16 '19 at 09:14

Sajad Haibat

697
5
12

score 0 · Answer 2 · answered Oct 26 '19 at 19:12

Run npm prod to compile the vue file and add it at the end of the body tag where you want it to use.

How Vue.js is used in laravel

when we run npm install it will download all packages to node_modules directory that are mentioned in the webpack.mix.js. Then we add required plugins in resources/js/app.js.

In resources/js/app.js we initialize vue.js using

new Vue(
     el:'#id_of_the_element'
})

Then we run npm run prod to compile the minified version of vue.js and place it public/js/app.js now it can be added where required

<html>
  <body>
      <div id="id_of_the_element">
         //....
      </div>
      //import your app.js here
      <script src="/js/app.js">
   </body>
</html>

Shoud I load Vue JS manually in laravel?

2 Answers2