[Vuejs]-How to use buefy(vue.js component library) on laravel blade template

by

0👍

With laravel it’s better to use vue files and compile with NPM.

Here’s the blade file. Laravel-mix will import the compile /public/js/app.js:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
...
 <body>
    <div id="app">
        <app></app>
    </div>
<script src="{{ mix('js/app.js') }}"></script>

  </body>
</html>

Your resources/js/app.js will use App.vue component:

The App.vue could be :

<template>
 <div>
   <h1>Hello</h1>
   <template v-for='permission in permissions' :key='item.id'>
    <div class="field">
      <b-checkbox v-model="permissionSelected" native-value="{{permission->id}}">
        {{permission->display_name}} <em>{{permission->description}}</em>
      </b-checkbox>
    </div>
  </template>
</div>
</template>
<script>
export default {
   name:'app',
   data:()=>({
     permissions:[],
     permissionSelected:null,
....

in a terminal use this command to compile your app.js, App.vue : npm run dev

Leave a comment