DEV Community: Genaro Hernández

Instalar Tailwind CSS en Ionic con Vue

Genaro Hernández — Fri, 03 Jun 2022 01:46:29 +0000

Bienvenidos a esta nueva publicación en el cual les voy a enseñar a integrar tailwindcss a su proyecto de ionic con vue.

El primer requisito para seguir el tutorial es tener instalado node.js para poder instalar globalmente el cli de ionic.

Ahora, haciendo uso de la terminal voy a ubicarme en un directorio donde guardaré todos mis proyectos de ionic y ejecutaré el siguiente comando

Instalar Ionic

ionic start ionic-tailwind blank --type=vue

Una vez instalado nuestro proyecto, nos ubicamos en la ruta del proyecto en la terminal y ejecutamos:

code .

Para abrir nuestro proyecto en Visual Studio Code. En la terminal ejecutamos el siguiente comando que va instalar tailwindcss, postcss y autoprefixer.

npm install -D tailwindcss postcss autoprefixer

Una vez culminada la instalación debemos de crear un archivo de configuración de tailwindcss, para ello escribimos en la terminal:

npx tailwindcss init

En este nuevo archivo vamos agregar las rutas de todos los componentes de vue.

module.exports = {
  content: ["./src/**/*.{js,vue}"],
  dark: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

Ahora debemos de crear un archivo llamado postcss.config.js y agregar el siguiente contenido.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Una vez instalado y configurado tailwindcss y postcss, para tener super poderes en nuestro proyecto debemos de instalar sass y sass-loader.

npm i sass
npm i sass-loader

Perfecto, ahora debemos de crear un nuevo archivo en ./src/theme/tailwind.scss y le agregamos los componentes de tailwind.

@tailwind base;
@tailwind components;
@tailwind utilities;

Para tener un mejor orden de los archivos css que está en la raíz de la configuración de nuestro proyecto ./src/main.js, cortamos todos los import.css y creamos un archivo llamado global.scss en la carpeta theme y pegamos, para corregir los import agregamos al inicio el @arroba, como estamos dentro de la carpeta theme, vamos a corregir la ubicación de las variables y le agregamos la extensión de scss., también importamos tailwind.scss.

/* 1. En main.js */
import './theme/global.scss';

/* 2. En /theme/global.scss */

@import '@ionic/vue/css/core.css';
@import '@ionic/vue/css/normalize.css';
@import '@ionic/vue/css/structure.css';
@import '@ionic/vue/css/typography.css';
@import '@ionic/vue/css/padding.css';
@import '@ionic/vue/css/float-elements.css';
@import '@ionic/vue/css/text-alignment.css';
@import '@ionic/vue/css/text-transformation.css';
@import '@ionic/vue/css/flex-utils.css';
@import '@ionic/vue/css/display.css';
@import './variables.scss';
@import './tailwind.scss';
@import './custom.scss';

Ya culminamos con la configuración, lo siguiente que tenemos que hacer es levantar nuestro proyecto, para ello vamos a ejecutar uno de los siguientes comandos.

ionic s
ionic serve

Perfecto, nuestro proyecto se ejecutó sin ningún error. Ahora vamos a escribir las clases que nos ofrece tailwind en nuestro componente de vue. Verificamos los cambios en el navegador... yyyy si!!! se reflejan los cambios en nuestro proyecto.

<template>
  <section class="flex justify-between">
    <p class="font-bold text-base">IONIC</p>
    <p class="text-base">TAILWINDCSS</p>
  </section >
</template>

Ahora dentro del componente en la etiqueta style, hay que indicarle que el lenguaje es scss para poder hacer uso de la directiva de tailwind llamada @apply que nos permite agrupar clases de tailwind en una nueva clase personalizada, es un nuevo superpoder desbloqueado que nos ayuda en escribir mucho más rápido los estilos para las interfaces de usuarios.

<style scoped lang="postcss">
section {
 @apply bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-300;
}
</style>

Recuerden que también podemos crear archivos scss globales y personalizados.

section {
 @apply bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-300;
}

Espero que les sirva esta publicación y si les gusto por favor no se olviden de darle me encanta o escribir un comentario. Pronto más novedades de Ionic con vue. Hasta luego.

Roles y permisos en Laravel con Inertia.js

Genaro Hernández — Thu, 16 Sep 2021 19:33:38 +0000

En cualquier proyecto es muy común la utilización de roles y permisos. Existen muchos ejemplos de realizar esta funcionalidad en un proyecto Laravel con blade o Laravel con Livewire. Pero ¿cómo agregar roles y permisos en Laravel Jetstream con InertiaJS? 🤔

En este tipo de proyectos en el cual se combina el backend con el frontend es necesario que la tecnología frontend conozca al usuario autenticado incluyendo que roles y permisos tiene. Por lo tanto, InertiaJS nos facilita nativamente obtener los roles y permisos. 😀

En tu backend debes de construir la funcionalidad de roles y permisos, puedes utilizar cualquier paquete; en lo personal utilizo Laravel Permission, si deseas un artículo respecto a cómo realizar esta funcionalidad, solo dejen un comentario solicitándolo.

Continuemos, en un proyecto con InertiaJS debemos ubicar el siguiente middleware: HandleInertiaRequests.php. Dentro del método share debemos de realizar algunas modificaciones.

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'auth' => function() {
            $user = auth()->user();
                return $user ? [
                    'roles' => $user->getRoleNames(),
                    'permissions' => $user->getAllPermissions()->pluck('name')
            ] : null;
        }
    ]);
}

Explico el código, si el usuario esta autenticado entonces que retorne los roles y permisos que el usuario tiene asignado; si no está autenticado que retorne nulo.

Ahora en un componente vue, dentro del template escribimos lo siguiente

<template>
    <div>
        {{ $page.props.auth.roles[0] === 'admin' ? true : false }}
    </div>
</template>

Con este pequeño código lo que hacemos es verificar si el primer rol del usuario es admin, en este caso es verdadero, lo que se podría hacer entonces es:

<template>
    <div v-if="$page.props.auth.roles[0] === 'admin'">
        Solo el admin puede ver.
    </div>
</template>

Espero que sea util esta forma de poder utilizar los roles y permisos en su proyecto Laravel con Inertia.js 🤭

FIN

Na... Sigamos codeando 💪, en el caso que un usuario tenga más de un rol y varios permisos sería muy difícil adivinar que rol tiene y por tanto establecer las restricciones que se desea.

Para resolver este problema, haremos uso de un paquete llamado Vue Gates, primero lo instalaremos utilizando yarn o npm:
yarn add vue-gates o npm i vue-gates --save. En su documentación en la sección Usage/Server Side Rendering/The asyncData Method tiene un ejemplo de cómo aplicarlo en nuestro proyecto:

export default {
  async asyncData ({ $axios, $gates }) {
    const [roles, permissions] = await Promise.all([
      $axios.$get('/api/roles'),
      $axios.$get('/api/permissions')
    ])

    $gates.setRoles(roles)
    $gates.setPermissions(permissions)
  }
}

Con este ejemplo de la documentación podemos adaptarlo en cada página de vue; lo único malo es que se tendrá que repetir el código en cada página y eso no es una buena práctica, lo ideal es reutilizar el código. Entonces, por sencilles vamos a crear un plugin en vue.

Creamos el siguiente archivo en la ruta resource/js/Plugins/Permissions.js.

import { usePage } from '@inertiajs/inertia-vue3'
export default {
    install: (app) => {
        app.mixin({
            mounted(){
                let authRoles = usePage().props.value.auth;
                let authPermissions;
                if(authRoles !== null){
                    authRoles = usePage().props.value.auth.roles;
                    authPermissions = usePage().props.value.auth.permissions;
                    this.$gates.setRoles(authRoles);
                    this.$gates.setPermissions(authPermissions);
                }
            }
        })
    }
}

Lo primero que haremos es importar usePage desde InertiaJS, lo cual nos permite hacer uso de los props, ¿recuerdan que en el middleware HandleInertiaRequest.php agregamos 'auth' para verificar si el usuario autenticado tiene roles y permisos?, lo que realmente hicimos fue que el 'auth' se cargue ni bien se inicia el aplicativo Laravel, y por lo tanto estará disponible en toda nuestra aplicación.

Ahora, también inicializamos dos variables uno para los roles y el otro para los permisos, en el authRoles le asignamos la autenticación del usuario, solo queremos saber si esta autenticado o no, en el authPermissions solo lo declaramos.

Vamos a registrar el plugin que hemos creado para poder utilizarlo globalmente en el archivo app.js.

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import VueGates from 'vue-gates';
import Permissions from './Plugins/Permissions';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(VueGates)
            .use(Permissions)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

Una vez que el usuario esta autenticado pasará la condicional. Y las dos variables tendrán los datos solicitados, lo cual manipulará 'vue gates' para las respectivas restricciones.

Ahora, en un componente vue utilizaremos las directivas que nos provee el paquete Vue Gates y haremos lo siguiente:

<template>
    <div v-role="'admin'">
        Solo el admin puede ver.
    </div>
</template>

Aplicar roles y permisos en InertiaJS (que es el eje de comunicación de Laravel con VueJS) se volvió muy fácil. Si quieres conocer más directivas de este paquete solo ve a la documentación de Vue Gates. Espero que sea de mucha utilidad para los que quieren aplicar roles y permisos a sus proyectos.

Extra

En mi repositorio tengo un proyecto llamado LaraDash que tiene implementado lo que describo en este artículo.

Si este artículo te fue de mucha ayuda, no dudes en darle un ❤.