In this blog post, we will explore how to create Vue.js component in Laravel Blade.
Bagisto is an open-source Laravel-based eCommerce framework, and it supports Vue.js for building dynamic user interfaces. We’ll leverage the power of Vue.js components and Blade directives to create reusable templates.
In this blog we are creating a Todo Component in Laravel Blade, In blade file we are used layouts with @push('scripts') and @push('css') directives for pushing custom css and js. In Bagisto by default the Vue.js dependency is already loaded with the master.blade.php file.
Let’s create vue component(X-Template) with fews simple steps in laravel blade.
Step:- 1. Firstly we need to define your component name, in our case we are using component named todo this name will be the name of X-Template of vue with the suffix of “-template” as id of the component. All the components related code will be in @push('scripts') directive.
Here component we define the component.
|
1 |
<todo></todo> |
To create the template, define a "<script>" tag with the "type" attribute set to "text/x-template“ and an "id" attribute of “{componentName}-template”. In our case, the component name is “todo”, so the ID will be “todo-template”.
Syntax:-
|
1 2 3 4 5 |
<script type="text/x-template" id="{componentName}-template"> <div> // Your vue.js code will be here </div> </script> |
Example:-
Here’s an example of a code.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/x-template" id="todo-template"> <div> <div class="control-group"> <label for="page_title">{{ __('Todo') }}</label> <input type="text" class="control" name="todo" @keyup.enter="addTodo" v-model="todo" data-vv-as=""{{ __('Todo') }}""> <li class="tasks__item" v-for="todoList in todoLists" :key="todoList" v-text="todoList"></li> </div> </div> </script> |
Step:- 2. Define the script of vue component.
Syntax:- Syntax of the component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> Vue.component('componentName', { template: '#componentName-template', data: function () { return { } }, // All the other vue methods and vue lifcycle hooks will // define here methods: { }, mounted() { console.log(`the component is now mounted.`) } }); </script> |
Example:-
Here’s an example of a code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> Vue.component('todo', { template: '#todo-template', data: function () { return { todo: '', todoLists: [] } }, // Define methods methods: { // addTodo Method addTodo: function() { if (this.todo == '') return this.todoLists.push(this.todo) this.todo = '' } }, }); </script> |
Our Component is now ready to use, we have already create route and controller and render index.blade file.
Example:-
Here’s an example of a code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
@extends('admin::layouts.content') @section('page_title') Todo @stop @section('content') <div class="content"> <div class="page-header"> <div class="page-title"> <h1>Todo</h1> </div> </div> {!! view_render_event('bagisto.admin.catalog.attributes.list.before') !!} <div class="page-content"> <todo></todo> </div> {!! view_render_event('bagisto.admin.catalog.attributes.list.after') !!} </div> @stop @push('scripts') <script type="text/x-template" id="todo-template"> <div> <div class="control-group" :class="[errors.has('todo') ? 'has-error' : '']"> <label for="page_title">{{ __('Todo') }}</label> <input type="text" class="control" name="todo" @keyup.enter="addTodo" v-model="todo" data-vv-as=""{{ __('Todo') }}""> <span class="control-error" v-if="errors.has('todo')">@{{ errors.first('todo') }}</span> <li class="tasks__item" v-for="todoList in todoLists" :key="todoList" v-text="todoList"></li> </div> </div> </script> <script> Vue.component('todo', { template: '#todo-template', data: function () { return { todo: '', todoLists: [] } }, methods: { addTodo: function() { if (this.todo == '') return this.todoLists.push(this.todo) this.todo = '' } }, }); </script> @endpush |
That`s all for implementing the Vue component in our Bagisto App. Let us know your thoughts in the comments below.
If you’re looking to build something amazing with Laravel, why not consider hire laravel developers who can bring your vision to life? They have the expertise and experience to develop robust and scalable applications using Laravel’s powerful framework. You can also checkout our Bagisto Extensions.
Thanks for reading.
