Promoción reactiva PERU %50 de descuento: + 51 983303581
Crear una aplicación web con laravel y vue 3

Prerrequisitos :

  • php > 7.4
  • composer 

composer create-project Laravel/laravel

Luego  ejecutamos:

npm install --save vue@next && npm install --save-dev vue-loader@next

Después de eso, necesitamos decirle a webpack que compile también nuestros archivos vue. Podemos hacer esto abriendo el archivo webpack.mix.js y agregando la siguiente línea:

const mix = require("laravel-mix");

mix.js("resources/js/app.js", "public/js")
    .vue() //new
    .postCss("resources/css/app.css", "public/css", [
        //
    ]);


Normalmente ejecuto npm install seguido de npm run dev.


Aquí probablemente obtendrá un error la primera vez que compile eso, porque npm ha instalado un paquete faltante para nosotros:

Screenshot of error message


Simplemente vuelva a ejecutar npm run dev y todo se compilará sin errores.



Crea nuestro proyecto

Vue En realidad, no hemos hecho nada con nuestra configuración de Vue. Cambiemos eso creando un componente raíz que albergará toda nuestra aplicación Vue. Cree un nuevo archivo App.vue en la carpeta resources / js con el siguiente marcado:

App.vue

<template>
    <div>
        <h1>Vue 3 App</h1>
    </div>
</template>


Ahora necesitamos adaptar nuestro app.js en resources / js para hacer uso de nuestro archivo vue:

app.js

//resources/js/app.js

import { createApp } from "vue";

import App from "./App.vue";

createApp(App).mount("#app");

require("./bootstrap");


welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="{{ asset('js/app.js') }}"></script>
</html>




Etiquetas

Recientes Blogs

Culpa maxime vel eligendi. Libero cumque quis ea et ut. Libero cumque quis ea et ut. Libero cumque quis ea et ut. sb89a5opxft3c3efzd4c sb89a5opxft3c3efzd4c