CODEWITHSUNDEEP
javascriptvue.jsmaterialize
Suisse
Suisse

Reputation: 3613

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).

Upvotes: 11

Views: 19801

Answers (4)

Torgeir Kruke
Torgeir Kruke

Reputation: 21

The answer from bruinspaw helped me a lot, I would like to suggest a couple of updates since this thread is over five years old:

1. Installation

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

(no changes, except I prefer pnpm over npm - npm is also fine) (see below if you want to use material-design-icons-iconfont instead)

2. import Material Design icons and Materialize CSS

In src/main.ts (or main.js if you don't use typescript):

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

Note the first import, which is an addition (and see below if you use material-design-icons-iconfont)

3. Initialize components

In App.vue (or the relevant component):

<script setup lang="ts">
import { onMounted } from 'vue'
import M from 'materialize-css'
// ... other code
onMounted(() => {
  M.AutoInit()
})
</script>

(replace "ts" with "js" if you don't use typescript). The main difference from the original post is that I use the (Vue 3) Composition API (as evident by 'setup') insted of the (older) Options API.

The main difference is that you don't have to include the <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> in index.html as you would with the solution in the first post (and as pointed out by David North). As a last point, I have begun using material-design-icons-iconfont instead of material-design-icons, as I find this to be a more streamlined version of the Material Design Icons. Do the following changes if you would like to try that:

  1. Install with pnpm install material-design-icons-iconfont --save instead of pnpm install material-design-icons --save
  2. import 'material-design-icons-iconfont/dist/material-design-icons.css' instead of import 'material-design-icons/iconfont/material-icons.css'

(this is my first post on stack overflow, so I hope I'm not doing anything wrong updating an old thread like this)

Upvotes: 2

bruinspaw
bruinspaw

Reputation: 641

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()
},
...

Upvotes: 23

wisdom
wisdom

Reputation: 230

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

Upvotes: 2

Suisse
Suisse

Reputation: 3613

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'

Upvotes: 9

Related Questions