Integra materializeCss con vuejs en 3 sencillos pasos

Asumiré que si sentiste curiosidad por el enunciado, ya tienes cierto conocimiento sobre vuejs, particularmente el primer framework para el desarrollo de sitios SPA que utilice fue angularjs pero mi favorito y el que decidí ir día a día conociendo mejor es el creado por Evan You.

si bien es cierto que dentro de la comunidad de vuejs existen alternativas excelentes como vuetify o vue-material, soy de los que prefiere utilizar directamente materializeCss y es algo que resulta util para aquellos que ya tenemos experiencia con el framework y no nos interesa demasiado utilizar o aprender a utilizar vuetify (a pesar de que este en realidad me guste ) o vue-material.

Dicho esto, en 3 sencillos pasos podremos empezar a maquetar al estilo material design nuestras webs con vue.

---

1) instalando materializeCss desde el repositorio de npm.

npm install materialize-css@next

o

yarn add materialize-css@next

esto nos traerá la ultima versión del framework de css.

A partir de la versión alpha 1.0.0 materializecss se desprende de jquery ya que pasaron sus funciones a vanilla javascript lo que significa también que no tendremos que preocuparnos por conflictos con jquery dentro de vue o otro framework javascript como angular. mas que en el caso de que por alguna razon tengas una configuracion manual de webpack y pasaras por alto configurar el css-loader en las reglas.

2) importando a nuestro main.js los archivos de materializeCss.

import Vue from 'vue';
import VueRouter from "vue-router";
import App from './App.vue';
// materializeCss
import 'materialize-css/dist/css/materialize.css'
import 'materialize-css/dist/js/materialize.js'

ya en este punto no necesitas hacer nada en particular, mas que empezar a maquetar utilizando clases y componentes que ofrece materializeCss framework dentro de tus componentes de vuejs.

pero como te habrás dado cuenta, al principio del articulo mencione tres sencillos pasos de los cuales ya he explicado 2, el paso 3 es algo muy simple pero importante, a pesar de que con los pasos anteriores perfectamente puedes hacer muchas cosas, ciertos componentes necesitan la propiedad autoinit (los select por ejemplo) de materialize para renderizarse/funcionar.

3) autoinit en componentes de vue

para este paso solamente necesitamos hacer uso de un método del ciclo de vida del componente llamado mounted()

 mounted() {
      M.AutoInit();
    }

AutoInit() le permite inicializar todos los componentes de Materialize con una sola llamada de función. Es importante tener en cuenta que no puede pasar opciones con este método. Si desea que M.AutoInit() ignore un determinado elemento para configurarlo a gusto, puedes agregar la clase .no-autoinit al elemento y no se inicializará con autoinit.

Y con esto tendríamos ejecutándose las funciones de javasScript que necesitan ciertos elementos afectados por materializeCss, quiero concluir diciendo que a pesar que este articulo trata especificamente sobre materializeCss este proceso en muchos casos puede hacerse con otros frameworks css como por ejemplo miligram, así que solo tienes que indagar un poco si quieres hacer una integración diferente.

espero que sea de provecho, hasta una próxima ocasión.

Comments

[bio426]

Y como haria si quiero usar los componentes javascript del framework?
Es decir, pasarles las opciones como esto

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems, {inDuration:2000});
});