Introduce the Laravel Vite plugin

Laravel Vite is an integration tool that brings the benefits of Vite to Laravel applications. Vite is a cutting-edge build tool designed to enhance the development workflow by offering rapid build times and efficient handling of front-end assets. Unlike older bundlers such as Webpack, Vite uses a modern approach that allows for quick updates and seamless development with contemporary JavaScript frameworks. This results in a more streamlined and productive experience when managing assets and building applications.

In this blog, Vue is the framework chosen, which provides a flexible and progressive approach to building user interfaces. It offers a lightweight core with an ecosystem of libraries and tools, making it ideal for small-scale and large-scale projects. The reactive data binding and component-based architecture make it particularly effective for developing dynamic, interactive applications. 

Benefits of Using Vite

Vite is a game-changing tool built specifically for modern front-end development. It’s optimized for frameworks like Vue, React, and other JavaScript-based ecosystems, offering a range of features that set it apart from older solutions. Here’s why Vite is a standout choice for modern web development:

• Fast Development Server: Vite starts quickly, even for large projects, by using ES Modules directly in the browser, skipping the bundling process for faster local development.

• Quick Hot Module Replacement (HMR): Vite provides instant updates in the browser without refreshing, making it ideal for real-time UI feedback in frameworks like Vue and React.

• Efficient Production Builds with Rollup: For production, Vite uses Rollup to create small, optimized builds with features like tree-shaking and module splitting.

• Built-in Framework Support: Vite supports Vue, React, TypeScript, and has plugins for additional frameworks like Svelte and Preact .

• Full ESM Compatibility: By leveraging native ES Modules, Vite skips transpiling in development, leading to faster load times.

• Rich Plugin Ecosystem: Vite supports rollup and custom plugins, allowing features like JSX support and environment management.

• Modern JS and CSS Support: Vite manages CSS modules, preprocessors, and assets like images and fonts effectively.

• Future-Ready Platform: Built for modern standards like HTTP/2 and ESM, Vite is equipped for the next generation of JavaScript applications.

How to use Laravel with Vite

First, we create the new project with the command, please choose name of the project. In the blog, laravel-mix-vue was chosen because it points to the combination of Laravel and Vue.js with the support of Vite, bringing the assets of Vue.js after the bundling process to Laravel:

          composer create-project laravel/laravel laravel-mix-vue

Composer is a dependency manager specifically designed for PHP. Composer handles libraries and packages in PHP projects, allowing developers to define and manage the libraries or frameworks they need in a project. If you have not installed Composer on your local machine, please refer to https://getcomposer.org/download/ for instructions.

Then navigate to the folder container of the project and run the commands below to install dependencies and start it:

            yarn 

            yarn dev

After completing all task to set up the project, you can install Vue JS and write an example component.

            yarn add vue --dev

            yarn add @vitejs/plugin-vue --dev

In Yarn, the --dev flag is used to add packages specifically for development purposes. When you use --dev, Yarn installs the package as a development dependency, meaning it’s only needed during development and not in production.

Create the new file for the first component Vue js (resources/js/components/ComponentExample.vue) like the following code

This structure includes:

• <script>: Where you can define the component’s name, data, and methods.
• <template>: The actual HTML structure rendered by the component.

Open up resources/app.js and update its refer code below. 

• createApp: This is a method used to create a new Vue app instance. It takes an options object that defines the behavior of the app.
• mount: This method attaches the Vue app to an element in the DOM with the id="app". This is where the app will be rendered.
• components: Components are the fundamental building blocks in Vue.js. They encapsulate their own logic, template, and styles, making them reusable and modular.

Open the file vite.config.js to define the Vue plugin.

plugins: [ ... ]:

• This section defines the list of plugins to use in the Vite build process.
• The Laravel plugin is responsible for managing the entry points (e.g., app.css, app.js) and enabling the automatic injection of Vite-generated assets into Blade views.
• The Vue plugin is responsible for enabling Vue.js component processing. The template configuration inside the Vue plugin allows customization of how asset URLs are transformed in Vue templates.

transformAssetUrls:

• The configuration inside Vue allows controlling how URLs in Vue component templates are processed. Setting base: null avoids adding a base path to URLs, and includeAbsolute: false prevents absolute URLs from being transformed.

resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js' } }

• This defines an alias for the Vue package to ensure that the correct version of Vue is used with Vite (specifically, the Vue 3 build that supports the bundler).

Finally, you need to modify the template in resources/views/welcome.blade.php.

Use the following commands to build and run your application:

• yarn build to compile the assets.
• php artisan serve to run your application.

The yarn build command compiles and bundles your Vue.js code, transforming it into optimized JavaScript and CSS files. These files will be placed in the public directory, where Laravel can access them. This process is managed by Laravel, which uses Vite to bundle and version the assets. Versioning ensures that the most up-to-date assets are served to users, preventing caching issues.

The command php artisan serve starts a local development server, typically accessible at http://127.0.0.1:8000/. This server will handle requests to your Laravel backend and serve your Blade templates along with the compiled Vue.js frontend assets.

The component should now be rendered tag H2 with content IVC.

Reference

https://laravel.com/docs/11.x/vite

https://www.freepik.com/free-photo/programming-background-collage_34089162.htm#fromView=search&page=1&position=4&uuid=1f081427-5991-4534-bc69-05ace07f9193

 (Cover image)