Search code examples
javascriptvue.jsmaterialize

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 Materialize like this:

import 'materialize-css'

Somehow the javascript is working, but the CSS is not loading; I test it with a Card Reveal.

The swapping animation works, but it is not styled. Card Reveal is one of the reasons why I want to use MaterializeCss, those other two don't provide this functionality. And I also want to use 'normal' HTML elements instead of using 100 of new elements (for example in vuetify).

Solution

  • 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'