1. Principal
  3. PHP y otros
  5. 1. Laravel 8 con auth ui y VUE.js 3

1. Laravel 8 con auth ui y VUE.js 3

Más
2 años 2 meses antes - 2 años 2 meses antes #41 por luispindola
1. Laravel 8 con auth ui y VUE.js 3 Publicado por luispindola
1. Crear un proyecto nuevo de Laravel:
El procedimiento lo pueden consultar en: luispindola.net/luispindola/index.php/ph...vel-con-laragon.html

2. Instalar en nuestro proyecto el sistema de administración de usuarios de laravel:
composer require laravel/ui

2. Crear vistas, bases de datos y sistema de usuarios:
En la terminal tenemos que escribir:
php artisan ui bootstrap --auth

Al finalizar se deben crear algunas vistas y migraciones en las carpetas del proyecto:



3. Compilar los archivos js y css que se utilizarán:
npm install && npm run dev

Esto tardará algunos minutos si muestra una pantalla como esta:


Significa que laravel instalo nuevas dependencias por lo que se tiene que ejecutar de nuevo:
npm install && npm run dev

Y al final debe mostrar una pantalla como esta:



4. Agregamos los datos de configuración en nuestro archivo .env y Ejecutamos las migraciones para crear las tablas necesarias para la autentificación:

En el archivo de configuración .env modificar las configuraciones referentes a la base de datos y el nombre y url del proyecto:


Ejecutar las migraciones para crear las bases de datos del proyecto:
php artisan migrate

Al finalizar el proceso en la base de datos se crearán las siguientes tablas:



Al seguir estos 4 pasos tendremos un sistema de usuarios básico en nuestro proyecto:





A partir de aquí iniciaremos con la instalación y crear un componente vue

5. Instalación VUE 3:
> npm install vue@next vue-loader@next

6. En el archivo webpack.mix.js en la linea 14 agregar al final .vue()


7. Creamos la carpeta "components" y en ella el archivo HolaMundo.vue en resources/js/components/



8. Agregar plugin Vue a SublimeText:
Precionamos Ctrl + P y tecleamos "Install Package" y en el buscador que se despliega seleccionar Vue.js Syntax Highlight



Con este plugin podemos visualizar la sintaxis de VUE en SublimeText.

9. En el archivo HolaMundo.vue ponemos el codigo del componente:


10. Modificamos el archivo app.js con el siguiente código:


11. En el Layout principal de nuestras vistas ponemos antes de cerrar la sección body el siguiente script:
<script src="{{ mix('js/app.js') }}" />
</body>
En caso de estar usando el lauyout que viene por default en laravel no es necesario agregarlo por que ya existe en la linea 13
    <script src="{{ asset('js/app.js') }}" defer></script>

12. Ponemos el siguiente codigo en la vista donde queramos agregar el componente:
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{ __('You are logged in!') }}


                    <hola-mundo />

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

En este caso el componente se agrega con la linea: <hola-mundo />

13. Vamos a la consola del proyecto y se ejecuta el comando:
npm run dev
o bien:
npm run watch

En la consola se debe mostrar lo siguiente:


14. Con esto podemos cargar nuestro sitio para verificar el funcionamiento:



LINKS:
Componente de Google Chrome para debug de componentes VUE (se ve en funcionamiento en la página anterior)
Componente Chrome

Documentación VUE.JS 3:
Documentación

Tutorial VUE.js:
Excelente Tutorial

Tutorial VUE.JS y Laravel:
Adjuntos:
Última Edición: 2 años 2 meses antes por luispindola.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  1. Principal
  3. PHP y otros
  5. 1. Laravel 8 con auth ui y VUE.js 3
Tiempo de carga de la página: 0.093 segundos