Setting up a project in Laravel 9 or 10 with Vue 3 in Mix and Vite.js
Laravel is a framework for developing web applications in PHP, which makes it easy to create robust and scalable applications using a clear and expressive syntax. It is one of the most popular and advanced frameworks in the PHP ecosystem and is widely used in the development of web and mobile applications. Laravel provides a wide range of tools and functionality that allow developers to build secure and scalable applications quickly and efficiently. One of the great advantages that we have when developing in Laravel is that we can use Node, therefore, we can use Node with any technology on the client and Laravel on the server; among these famous plugins for Laravel there is Laravel Mix and Vite as application packagers, since Laravel 9.x, Laravel uses Vite.js instead for the simple fact of being much faster in packaging; you must use the implementation that corresponds to the version of Laravel you are using.
Laravel Mix
If you are using Laravel Mix in your Laravel project, these are the steps you have to perform; we are going to configure Vue 3 in a project in Laravel 9, first, we are going to install the dependencies:
We install Vue and dependencies
npm install --save vue@next
npm install vue-loader- Vue next refers to Vue 3.
- Vue Loader is the one that allows you to translate Vue files to JavaScript.
Create the Vue 3 instance
The next thing we are going to do is create a file with the Vue 3 instance, with which we can create components and others:
resources/js/vue/main.js:
import { createApp } from "vue";
import App from "./App.vue"
const app = createApp(App)
app.mount("#app")
Creamos el componente principal, el llamado App.vue:
resources/js/vue/App.vue:
<template>
<div>
<h1>Principal</h1>
<list/>
</div>
</template>
<script>
import List from "./componets/List";
export default {
components:{
List
}
}
</script>And an example component, the listing one:
resources/js/vue/components/List.vue:
<template>
<div>
<h1>Listado de Post</h1>
</div>
</template>And we register it in the webpack.mix:
webpack.mix.js:
mix
.js('resources/js/app.js', 'public/js')
.js('resources/js/vue/main.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);And with this, we already have Vue installed and configured in a Laravel project; the next thing we are going to do is create a page from blade, to consume the application in Vue:
Also note that we use the .vue function that allows transpiling .vue files to a js file; already with this; the next thing we need is to create a page that we can use to display the application in Vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue</title>
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/main.js') }}"></script>
</body>
</html>
Y su ruta:
// web.php
Route::get('/vue', function () {
return view('vue');
});Add Vue 3 to the project in Laravel (with Laravel Vite)
You have to follow these steps if you are developing a project in Laravel that has the vite.config.js file.
Let's add the Vue 3 dependencies to the Laravel project:
$ npm install --save vue@next
$ npm install vue-loaderThe vue@next is the actual package to install vue 3, and the vue-loader is just the package that allows to process the .vue files and generate an output file that can be understood by the browser.
vue-loader is the webpack loader that allows you to process Vue components.
In addition to the previous packages, we have to install the Vue plugin with Vite:
$ npm install @vitejs/plugin-vueAnd in the Vite configuration file, we add to Vue:
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});Now, we have the dependencies ready, we are going to configure the project; For this, we are going to create the necessary files, they are basically the same ones that exist in a project generated with the Vue Cli.
We will create some files in the resources folder whose structure and functionality we indicate below.
This first file would be to build the main instance of Vue; remember that it is the one we also use to configure any other plugin.
resources/js/vue/main.js:
import { createApp } from "vue";
import App from "./App.vue"
const app = createApp(App)
app.mount("#app")
Already with this; when entering the mentioned route we have:
All this content is part of both my book on Laravel and my complete course.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter