Laravel JavaScript & CSS Scaffolding – The Laravel JavaScript & CSS Scaffolding is provides a basic starting point using Bootstrap and Vue that will be helpful for many application.
Laravel JavaScript & CSS Scaffolding.
Let us understand how to use laravel JavaScript & CSS Scaffolding.
Function:-
There are some followings function available in laravel JavaScript & CSS Scaffolding.
- 1. Introduction.
- 2. Writing CSS.
- 3. Writing JavaScript.
1. Introduction.
As a Laravel does not control which javascript or css pre-processor you use. It does provide a basic starting point. By default Laravel use NPM to install both of these frontend packages.
CSS
Laravel Mix provide a clean, expressive API over compiling SASS or less, which are extension or plain CSS that add varialbles, mixins, and other powerful features that make working with CSS much more enjoyable.
JavaScript
Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don’t have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using the Vue library.
2. Writing CSS.
Laravel package.json file includes the bootstrap-sass package to help you get started prototyping your application’s frontend using Bootstrap. However, feel free to add or remove packages from the package.json file as needed for your own application
npm install
Once the dependencies have been installed using npm install , you can compile your SASS files to plain CSS using Laravel Mix.
npm run dev
The default webpack.mix.js included with laravel will compile the resources/assets/scss/ SASS file.
3. Writing JavaScript.
All of the javascript dependencies required by your application can be found in the package.json file in the project root directory. The file is similar to the composer.json file except it specifies JavaScript dependencies instead of PHP dependencies.
npm install
Once the packages are installed, you can use the npm run dev command to compile your assets.
npm run dev
The app.js file you can register you Vue component in laravel.
Writing Vue Components
Fresh Laravel application contain Example.vue. Vue component located in the resources/assets/js/components directory. The Example.vue file is an example of a single file Vue component which defines its JavaScript and HTML template in the same file.
Vue.component('example', require('./components/Example.vue'));
To use the component in your application, you can simply drop it into one of your html templates.
@extends('layouts.app')
@section('content')
<example></example>
@endsection