How can i use vue script without using vue template in laravel

Question

This might be silly to ask, but i want know what is best the way to use vue script in pages seperetly without declaring it as global ? For e.g, i have many pages in laravel blade i.e home page, category page, product page etc.

Now what I want is to use vue to make api call to fetch data from the server and render the products in blade with v-for directive. I do not want to use vue templates

This is my first time working with vue, so can anyone please point me how should i approach one this.

I tried to follow many documents on google , all of them explain on creating vue template then declare it in app.js globally and use in the blade which I do not want. All I want to create a vue file and do my operations and whatever the data I get and then I want to pass to the blade and use it for further mapping or looping.

https://medium.com/justlaravel/introduction-to-vue-js-in-laravel-e8757174e58e and few more.

The blade template will have already been compiled on the server and sent to the browser so you won't be able to edit the blade file itself after that. To manipulate the page (i.e. use the data from the ajax request to change the page) you will have to use some form of javascript. — Rwd
– Rwd, Commented Aug 3, 2018 at 19:47
Definitely you can get the object returned from ajax call and pass it to view using v-for on it, but the best idea is to use templates. — omitobi
– omitobi, Commented Aug 3, 2018 at 23:05
@RossWilson, yes, i do understand your pointers. Lets say i want to render products and i used v-for directive like this . <li v-for="item in items"> product details here </li> and if i change items using ajax is it going to update ? I tried to do so but that did not work. And also can't use {{}} inside blade for bue laravel blade taking it as php syntex — user7747472
– user7747472, Commented Aug 4, 2018 at 3:17

Marcus · Accepted Answer · 2018-08-04 05:30:12Z

Don't know how much you know. There is two main ways of using vue in Laravel and they all need to have been imported "globally" in your app.js and then in your layout your wrap the contents of the body in your main vue file. Note this vue file should not have template inside because it is using the inline-template attribute all the html should be inline in the component

    <body>
    <div id="channel">
      <channel inline-template>
        <div>
          @yield('content')
        </div>
      </channel>
    </div>
    <script src="{{ mix("js/channel.js") }}"></script>
    </body>
    </html> 

1. one way doing it is then to make normal vue components like so. This means 
that you need to have a <template></template> inside the vue component.

    @extends('layouts.app')

    @section('content')
       <div class="columns is-multiline">
          <div class="column is-7">
            <div class="columns is-multiline">
              <admin-web-orders v-bind:site="site" v-if="site"></admin-web-orders>
              </div>
            </div>
          </div>
    @endsection


2. Other way would be using inline templates this alows you to use all the blade stuff but still use vue 

@extends('layouts.app')
@section('content')
  <div class="columns is-multiline">
    <div class="column is-7">
      <div class="columns is-multiline">
        <admin-web-orders inline-template>
          <div class="content has-padding-2" v-if="orders && orders.data && orders.data.length == 0">
            <div class="column is-8 is-offset-2 has-text-centered">
              <figure class="image has-no-margin">
                <img src="{{ asset("my asset") }}" alt="">
              </figure>
              <p class="has-text-grey">
                <b>Prova gärna att lägga till <a href="{{ route("myRoute") }}" class="link has-text-info">Annonsering</a></b>
              </p>
            </div>
          </div>
        </admin-web-orders>
      </div>
    </div>
  </div>
@endsection

And to answer your comment if you are in an inline-template yo can

<li v-for="item in items">@{{ item.name }} </li>

If you are in a normal component

 <li v-for="item in items">{{ item.name }} </li>

The @ stops blade from thinking it is php

Collectives™ on Stack Overflow

How can i use vue script without using vue template in laravel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related