How To Use MaterializeCss With Vue.js?

I don't want to use Vue-Material nor Vuetify. I want to use Materialize. What I do is: npm install materialize-css@next In main.js, where my new Vue App is defined I import Mater

Solution 1:

Step 1: installation

npm install materialize-css@next --save
npm install material-design-icons --save

Step 2: import materialize css in src/main.js

At src/main.js

import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'

Step 3: initialize materialize components

Add following code in your component(say App.vue):

import M from 'materialize-css'

export default {
...
mounted () {
    M.AutoInit()
},
...

Solution 2:

This line imports the javascript (the entry point of the npm module from node_modules folder):

import 'materialize-css'

To import the CSS files just do this:

import 'materialize-css/dist/css/materialize.css'

Solution 3:

I would also recommend you add the materialize css CDN in the index.html. Aand also create a script tag and add this:

document.addEventListener('DOMContentLoaded', function() {
    M.AutoInit();
 });