How to separate vue js file code from laravel blade?

Question

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

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

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 ?

Laravel now ships with vue, so it's probably easier to use the default setup: npm install and then use elixir to compile your js assets — craig_h
– craig_h, Commented Dec 21, 2016 at 11:53

Swapnil Chaudhari · Accepted Answer · 2016-12-22 08:01:55Z

2

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

edited Dec 22, 2016 at 8:01

Swapnil Chaudhari

2032 gold badges4 silver badges11 bronze badges

answered Dec 21, 2016 at 12:03

Imam Assidiqqi

5145 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Swapnil Chaudhari Over a year ago

did not work form me. it does not showing error but also not result.

Imam Assidiqqi Over a year ago

where did you put your vue.js on the blade template? Please include the code for that blade template on your question.

Imam Assidiqqi Over a year ago

it's clear you aren't move the blog.js after the #manage-vue... Try to move everything (vue.js script and blog.js file) to beneath the #manage-vue element

tony19 · Accepted Answer · 2022-07-16 04:07:31Z

0

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>

edited Jul 16, 2022 at 4:07

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 21, 2016 at 11:08

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Collectives™ on Stack Overflow

How to separate vue js file code from laravel blade?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related