CODEWITHSUNDEEP
laravelvue.js
Swapnil Chaudhari
Swapnil Chaudhari

Reputation: 203

How to separate vue js file code from laravel blade?

I am currently working on Laravel 5.3 and Vue Js, i have following structure of application.

  1. resource/view/layouts/plane.blade.php (works as master.blade.php)
  2. resource/view/layouts/dashboard.blade.php (works as child.blade.php - extends plane)
  3. resource/view/index.blade.php (current blade file - extends dashboard)

  4. public/js/blog.js

    plane.blade.php code

     <!DOCTYPE html>
     <html lang="en" class="no-js">
         <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
                <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
                <script type="text/javascript" src="/js/blog.js"></script>

          </head>
           <body>
                  @yield('body')
           </body>
     </html>

    dashboard.blade.php code 

     @extends('layouts.plane')

 @section('body')
        <div class="row" id="manage-vue">
            @yield('section')
       </div>

  @stop

    index.blade.php code

     @extends('layouts.dashboard') 

 @section('page_heading','Blog')

 @section('section')



<div >

    @{{ message }}

</div>

@stop

    blog.js code

        var myModel =  new Vue({
       el: '#manage-vue',
       data: {
           message: 'Hello Vue.js!'
       }
   });

    With these separate files, i am not getting result, as it shows error Cannot find element: #app.

    If i place category.js code in index.blade.php file, i get correct result.

    How can i work with separate files ?

Upvotes: 2

Views: 1625

Answers (2)

Saurabh
Saurabh

Reputation: 73589

Instead of el you have to use template like following:

 var myModel =  new Vue({
       template: '#app',
       data: {
           message: 'Hello Vue.js!'
       }
   });

And you have to have following in the HTML:

<script type="text/x-template" id="app">
  <div>
    ...
  </div>
</script>

Upvotes: 0

Imam Assidiqqi
Imam Assidiqqi

Reputation: 514

You have to insert the blog.js after the #app element.

Upvotes: 2

Related Questions