Guía de Laravel , Vue y Vuetify para iniciar un proyecto

Hace tiempo al comenzar a desarrollar una aplicación para reserva de ambientes en Laravel , Vue y Vueitify me topé con la realidad que no hay mucha información en español que te enseñe como empezar a utilizar estas herramientas juntas.

Así que en las siguientes líneas escribo un resumen de todo lo que aprendí para empezar a programar en estas increíbles herramientas juntas, me refiero a laravel y vuetify

Requisitos previos o comenzar

Para seguir la siguiente guía necesitas tener ya instalado:

• composer
• laragon, xampp, wamp, mamp o lamp
• Nodejs
• Una terminal (Power shell, git bash,etc)

Una vez tengas instalado todo lo anterior podemos comenzar

1.- Creamos el proyecto en Laravel

Creamos un proyecto en blanco con composer; pero ustedes pueden elegir cualquier otra forma de crear un proyecto Laravel.

composer create-project — prefer-dist laravel/laravel app_laravel_vuetify

si lo ejecutamos veremos nuestra en nuestra aplicación local la pantalla de bienvenida.

Pantalla inicial de un proyecto en laravel 5.8

2.- Instalamos las dependencias para el Frontend

Al explorar la carpeta de nuestro proyecto podemos ver que tiene un archivo package.json el cual contiene todas las dependencias para comenzar con el frontend; podemos citar algunas como bootstrap, jquery ,sass y el que más nos interesa Vue.

Así que para instalar todas estas dependencias ejecutamos el comando:

npm install

Una vez instalado podemos verlo todo en la carpeta node_modules

3.- Instalamos Vuetify

Para instalar Vuetify solo requerimos ejecutar el siguiente comando en la terminal:

npm i vuetify –save

4.- Importamos los estilos de Vuetify

Para ello nos dirigimos al archivo app.scss que se encuentra en la carpeta resources/sass y escribimos al final del archivo el siguiente código:

@import ‘~vuetify/dist/vuetify.min.css’;

5.- Importamos Vuetify

Para utilizar vuetify necesitamos importar su libreria en app.js, esta se encuentra en resources/js .

Dentro de este archivo agregamos las siguientes líneas de código de tal manera que el archivo quede así:

window.Vue = require(‘vue’);
import Vuetify from ‘vuetify’;
Vue.use(Vuetify);

6.- Probamos todo lo hecho hasta ahora

Si deseamos probar que todo esta correcto simplemente ejecutamos el siguiente comando:

npm run watch

Que compilara todo nuestro código de javascript y css.

Resultado de la compilación del frontend

7.- Creamos nuestro plantilla inicial en Laravel

Ejecutamos el siguiente comando:

php artisan make:auth

El cual no creara archivos iniciales que necesitamos para empezar cualquier proyecto en laravel con autentificación.

Estos archivos pueden ser creados manualmente pero por motivos pedagógicos lo haremos con el comando que nos proporciona laravel make.

8.- Agregamos la fuente de texto Roboto

Vuetify necesita utilizar la fuente de texto Roboto para poder renderizar algunos iconos; para ello es necesario agregar la siguiente línea de código en la cabecera del archivo app.blade.php .

<link href=’https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel=”stylesheet”>

Este archivo app.blade.php se encuentra en resources/views/layouts el cual se generó en el anterior paso.

9.- Finalmente comprobamos usando un componente de Vuetify

Para finalizar esta guía utilizaremos un componente de Vuetify.

Para este ejemplo haremos uso de uno de los componente más complejos:

El Data Table

Primeramente podemos ver que al crear un proyecto de laravel este ya viene de inicio con un componente de vue creado de ejemplo.

Utilizaremos este componente ExampleComponent.vue que se encuentra en resources/js/components donde copiamos todo el código, tanto del template, como del script de cualquier ejemplo de un Data Table de la documentación de Vuetify.

Seguidamente para probar este componente podemos hacer uso del archivo login.blade.php al modificarlo de tal manera que se vea así:

@extends(‘layouts.app’)
@section(‘content’)
   <example-component></example-component>
@endsection

Por ultimo solo debemos ingresar a la dirección local de nuestra aplicación en el navegador, por Ejemplo en laragon:

http://app_laravel_vuetify.test/login

y observamos el resultado final

Data Table de Vuetify en Laravel

Espero que esta guía haya sido de utilidad para todos.

No olviden pasar por mi canal de youtube donde subo todo mis proyectos de código libre y tutoriales de programación.