Setting up a project in Laravel 9 or 10 with Vue 3 in Mix and Vite.js

- Andrés Cruz

En español
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-loader

The 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-vue

And 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:

App en vue
App en vue

All this content is part of both my book on Laravel and my complete course.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.