Using Vue.js

You can use frontend framework Vue.js and React.js etc.

Directory Structure

Here is the example of file and directory structure for /packages/vendor-name/project-name/resources.

Create Laravel blade file and keep it in your app’s /resources folder.

/packages/vendor-name/project-name/
                      ├── resources
                      │    ├── js
                      │    │  ├── admin
                      │    │  │   └── Example.js
                      │    │  └── components
                      │    │      └── ExampleComponent.vue
                      │    └── views
                      │       ├── admin
                      │       │   ├── layouts
                      │       │   │   └── app.blade.php
                      │       └── index.blade.php

How to use

Here is an example of views/admin/layouts/app.blade.php

@extends('admin.layouts.master')

@section('leftmenu')
    @include('admin.includes.leftmenu', ['project-name' => "vendor-name/project-name"])
@endsection

@push('package-styles')
    {{ style(mix('css/bootstrap.css', 'vendor/rvsitebuilder/core')) }}
@endpush

@prepend('package-scripts')
    {{ script(mix('js/bootstrap-vue-axios.js', 'vendor/rvsitebuilder/core')) }}
@endprepend

Creating Component

Includes a simple Vue component intended to acquaint you with the basic steps required to integrate a component into your application.

We choose Bootstrap Vue because quickly integrate Bootstrap v4 components with Vue.js.

{info} If you are not familiar with its concept. Check out the full Bootstrap Vue to get started.

Let's turn our attention to the aforementioned js/components/ExampleComponent.vue file.



There are two main components. The first part is the html template and the second part is the section encapsulated by the