• Writing Vue components
• Using React
• ##Introduction
  • Although Laravel does not force you to use which JavaScript or CSS preprocessor, it does provide a starting point for using Bootstrap and Vue suitable for many application scenarios. By default, Laravel uses NPM to install these two front-end packages.
CSS

Laravel Mix provides a clean, expressive API for compiling SASS and Less, which can extend the original CSS and have the ability to Add variables, mixins, and other powerful features that make CSS better to use. In this document, we'll briefly describe the general compilation process for CSS; however, you'd be better off checking out the full Laravel Mix documentation for details on compiling SASS and Less.

JavaScript

Laravel does not require you to use a specific JavaScript framework or library to build your application. In fact, you can do it without using JavaScript at all. But Laravel includes several basic scaffolding that make it easier to create modern JavaScript based on the Vue library. Vue provides a highly expressive API that uses components to build robust JavaScript. Like CSS, JavaScript components can be easily compiled into a single, browser-based JavaScript file using Laravel Mix.

Delete the front-end scaffolding

To delete the front-end scaffolding from the application, you can use the preset Artisan command. Executing the preset command with the none option will remove Bootstrap and Vue scaffolding from the application, leaving only empty SASS files and several commonly used JavaScript tool libraries:

php artisan preset none

Writing CSS

Laravel’s package.json file contains the bootstrap package , to help you start initializing the front-end of your application using Bootstrap. But you can add or delete dependent packages in package.json according to the needs of your own application. You don't have to use the Bootstrap framework to build Laravel applications, it just provides an easy-to-use starting point for people who want to use it.

Before compiling CSS, please use the Node Package Manager (NPM) to install the project front-end dependencies:

npm install

Once the dependency package has been installed using npm install, you can use Laravel Mix compiles SASS to native CSS. . The npm run dev command will process the declarations in the webpack.mix.js file. Usually the compiled CSS is placed in the public/css directory:

npm run dev

Laravel’s default webpack.mix.js file will be compiled resources/ sass/app.scss SASS file. app.scss Import the SASS variable file and load Bootstrap, which provides an easy-to-use starting point for most applications. You are free to customize the app.scss file to use whatever preprocessor you wish or even a completely different preprocessor by configuring Laravel Mix.

Writing JavaScript

All JavaScript packages that the application depends on must be found in the package.json file in the project root directory. This file is similar to the composer.json file. The composer.json file resolves PHP dependencies, and the package.json file resolves JavaScript dependencies. Install these dependency packages using the Node Package Manager (NPM):

npm install

{tip} By default, Laravel's package.json file contains vue , axios and several other packages to help you get started building JavaScript applications. You can add or delete dependencies in the package.json file at will according to the needs of the application.

Once these packages are installed, you can use the npm run dev command to compile your resources. Webpack Module bundler for modern JavaScript applications. When you run the npm run dev command, Webpack will execute the instructions in the webpack.mix.js file:

npm run dev

By default, Laravel's webpack. The mix.js file compiles the SASS and resources/js/app.js files. You can register components in the app.js file if you prefer to configure your JavaScript application using other frameworks. Compiled JavaScript is usually placed in the public/js directory.

{tip} app.js The file will load the resources/js/bootstrap.js file, which is responsible for configuring and starting Vue, Axios, and jQuery and other JavaScript dependencies. If you want to configure additional JavaScript dependencies, you can do so within this file.

Writing Vue Components

By default, pure Laravel applications include ExampleComponent. vue Vue components are stored in the resources/js/components directory. The ExampleComponent.vue file is an example of a single-file Vue component that defines the component's JavaScript and HTML in the same file. Single-file components provide an easy way to build JavaScript-driven applications. This example component is registered in the app.js file:

Vue.component(  
  'example-component',    
  require('./components/ExampleComponent.vue')
 );

To use this component in your app, you need to put it into an HTML template. For example, to run the make:auth Artisan command to build the skeleton of the application's user authentication and registration page, just place this component in the home.blade.php Blade template:

@extends('layouts.app')
@section('content')  
  <example-component></example-component>
 @endsection

{tip} Remember, every time you modify the Vue component, you must run the npm run dev command. You can also run the npm run watch command to monitor and automatically recompile changed components.

If you are interested in further learning to write Vue components, you can read the Vue documentation, which provides a comprehensive and easy-to-read overview of the entire Vue framework.

Using React

If you prefer to use React to build JavaScript applications, Laravel makes it very easy to switch between Vue scaffolding and React scaffolding. In a pure Laravel application, this can be achieved using the preset command with the react parameter:

php artisan preset react

This command will remove the Vue scaffolding and use React Scaffolding replaces it and also contains an example component.