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).
There are two ways to use MaterializeCSS, either you can download the files on your system or use the files from CDN (Content Delivery Network). Download the Materialize Package. Download the Materialize SASS Package.
Integration with Angular: The above all installation methods provide full functionality with materialize and no need to further install anything to work in angular. Take any example and just use the appropriate HTML structure inside the component part of angular and you are good to go.
Local Installation Go to http://materializecss.com/getting-started.html to download the latest version available. Then, put the downloaded materialize. min. js file in a directory of your website, e.g. /js and materialize.
Unlike Bootstrap, Materialize does not require popper. js. It only requires jQuery. This is all you need to get started.
npm install materialize-css@next --save
npm install material-design-icons --save
At src/main.js
import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'
Add following code in your component(say App.vue):
import M from 'materialize-css'
export default {
...
mounted () {
M.AutoInit()
},
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With