Multi-page Application done better with Laravel, Vue and, Vite pt. I

source: https://welcm.uk/blog/best-admin-templates-to-get-you-started-with-laravel-and-vuejs

This story is another iteration and rewrite to the previous trials done three and, one and a half years ago respectively to develop a traditional multi-page web application with Laravel php framework on backend and, Vue on frontend.

The main difference between this iteration and the last is that we’re going to use Vite instead of Laravel Mix to build the frontend of our application besides, including third-party frontend libraries e.g. jQuery, bootstrap, DataTables, etc.. into the Vite’s building process as required modules in the packages.json file, rather than having them polluting our blade views in scattered <script> tags.

The Project Layout

Pretty similar to what we’ve done with Mix setup, a Laravel project that uses Vue in its pages compiled by Vite requires the following essentials — will be elaborated further in this article and its subsequent parts:

• vite.config.js file located in the root directory of any application based on Laravel version 9 and later, for older Laravel projects you can refer to Laravel Mix to Vite migration guide.
• packages.json file also located in the root directory of the project, it should include all required JavaScript and frontend dependencies.
• General purpose Vue components, personally I prefer to have them in resources/components directory — starting from the root directory of the project not public —, it’s up to you where to store them though.
• Specific purpose blade components, I put them in resources/views/components/{component_type} replacing {component_type} with something like modals, tables or, graphs, etc.. then, inside of each type’s directory I may have one or more component of that type.
• The project conventional blade views in other directories within resources/views or, within it directly which will be using the blade components mentioned in the previous point — master layouts yielding content sections from other views can still be used in this approach.
• JavaScript files that will utilize the vue components for each blade view and, the stylesheet — sass, scss or, less — files required in the project.

Let’s Dive In

In this part we’ll cover the first couple of essentials mentioned above, other points will be explained in the subsequent Part II and Part III of this article.

I. Vite Configuration file.

Vite is a build system for frontend projects that can replace Webpack — the build system which is used by Laravel Mix — but, with simpler configuration syntax and more approachable plugins system so, we’ll configure it using its default settings file vite.config.js like the following:

In that file we begin by importing required modules which are: vite configuration definition function defineConfig, Laravel vite plugin, Vue vite plugin and, file globSync function.

Then we collect the javascript and stylesheet files that we’d like vite to build and transpile into browser compatible files using the globSync function so, all files under resources/js and resources/scss directories are included.

Then we export the vite configuration which will be used when we run the build command later on, the resolve block here is necessary to use Vue with runtime template compilation, which enables us to use vue component markup from within our blade views, as for the plugins block here we configure the plugins we’ve imported at the beginning, the list of files we need to build is passed to the laravel plugin in the input variable, finally the vue block configures vue not to transform relative asset URLs as that’s already handled by the laravel plugin.

II. Required dependencies in packages.json

Just like composer requiring necessary backend tools for our project, we use npm to require the frontend tools we need to build our assets — including Vite itself — so, let’s look at the following package.json file which is already included in our Laravel project’s root directory:

You might find this file a bit different than the default one, as you can see there are some third-party libraries like DataTables, jQuery and, moment listed as dependencies, this file is just an example so, the dependencies you require could be different however, vue, vite, @vitejs/plugin-vue and, laravel-vite-plugin are essential in our setup so, ensure you have them.

At this point we can run npm install to get all listed dependencies downloaded into our project, once it’s done you’ll find the notorious node_modules directory in your project’s root then, by running npm run production or npm run development vite will build any source files under resources/js and resources/scss into public/build directory.

The difference between the last two commands is that production builds in production mode, meaning output files are optimized and compressed for production use with debugging and Vue DevTools disabled, while development builds with DevTools enabled and output files are readable for debugging and testing.

That concludes this part of the article, you can continue reading the second part here.