Integracion de materializecss en vue js.

vue js- materialize

npm install materialize-css
o
yarn add materialize-css@next


//Agregar en el archivo main.js
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'



//Agregar en los componentes vue
mounted() {
      M.AutoInit();
    }
   
//Agregar en en los componentes vue  en la seccion <style></style>
<style scoped>
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

</style>

Integra materializeCss framework 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();
    }

---

4. Y al final de nuestros componentes de vue , en la seccion <style></style, importamos los iconos de google agregando lo siguiente:

<style scoped>
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

</style>

Y con esto tendríamos ejecutándose las funciones de javasScript que necesitan ciertos elementos afectados por materializeCss, espero que sea de provecho, hasta una próxima ocasión.

Autor de este articulo : @michelnovellino

<script> import HelloWorld from './components/HelloWorld.vue' import 'materialize-css/dist/css/materialize.css' import 'materialize-css/dist/js/materialize.js' export default { name: 'App', components: { HelloWorld }, mounted() { app.AutoInit(); } } </script> <style> @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css'); </style>

Esto es un plagio descarado, ni siquiera te molestaste en cambiar una palabra pero ni del titulo de mi articulo.

Hola. Esto era solamente información que quería tener memorizada para mi uso personal, para no perderla. No hago nada malo con ella. Si quieres la eliminó ahora mismo. Un saludo. Michel Novellino ***@***.***> schrieb am Fr., 6. Okt. 2023, 15:06:

…

***@***.**** commented on this gist. ------------------------------ Esto es un plagio descarado, ni siquiera te molestaste en cambiar una palabra pero ni del titulo de mi articulo. [image: imagen] <https://user-images.githubusercontent.com/19700255/273216813-a4e31f77-8496-4cbe-b28d-d4548de1436e.png> — Reply to this email directly, view it on GitHub <https://gist.github.com/josepereza/1dcf75263c1f8f08827992778d3046a0#gistcomment-4715965> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALPMAKSVFPDWJDWDIOV5OYDX5764DBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TQNZRHAYTQN5HORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you authored the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

Ayudaria por lo menos aclarar que soy el autor, porque tuve problemas con la plataforma donde tengo mi articulo por esto.

Ok. Lo hago. Gracias. Un saludo. El dom, 8 oct 2023 a las 1:03, Michel Novellino ***@***.***>) escribió:

…

***@***.**** commented on this gist. ------------------------------ Ayudaria por lo menos aclarar que soy el autor, porque tuve problemas con la plataforma donde tengo mi articulo por esto. — Reply to this email directly, view it on GitHub <https://gist.github.com/josepereza/1dcf75263c1f8f08827992778d3046a0#gistcomment-4717424> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALPMAKRT7RYTEI7BBBZTJXTX6HNT3BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TQNZRHAYTQN5HORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you authored the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

Hola, gusto en saludarles... una consulta...? esto solo funciona con el optionAPI no funciona con el setup? o mejor dicho como se configuraria con el setup en la etiqueta script?