Proper MaterializeCSS initialization in VueJS Project

Question

I try to init MaterializeCSS framework without jQuery in VueJS project, created with npm (vue init webpack projectname)

From version 1.0.0-rc.2 Materialize supports its own initialization without jQuery, smth like this:

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

But with this way, JS Materialize Components work only after manual page reloading and when I open some component and return to component with Materialize stuff - it doesn't work - I need to reload page manually again all the time.

So how to init JS components in proper way?

See the question solved:M is not defined when using Materialize-css with Vue — bruinspaw
– bruinspaw, Commented Feb 25, 2020 at 23:10

user10017742 · Accepted Answer · 2018-07-01 15:22:35Z

5

It worked for me so you may want to try this:

Go to your src/main.js file and add the following lines (if assume you are using npm):

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

Personally, I use the M.AutoInit() way of initializing JS components on each vue component that needs them:

<template>
  <div class="componentName">
    <!-- Some HTML content -->
  </div>
</template>


<script>
  export default {
    name: 'componentName',

    data() {
      return {
        // Some values
      };
    },

    mounted() {
      M.AutoInit(); // That way, it is only initialized when the component is mounted
    }
  }
</script>


<style scoped>
  /* Some CSS */
</style>

Using M.AutoInit() or

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

inside the mounted function of your component will result in them being called only when they are fully mounted.

answered Jul 1, 2018 at 15:22

user10017742

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Johnson Over a year ago

Why this method doesn't work when I try to use v-if and v-else construcntions? For example, I fetch data from server and I place my collpsible into v-else tag - to show some data in collpasible when it would be received

user10017742 Over a year ago

v-if and v-else remove the concerned node from the DOM so it is not mounted. The mounted method is called when the component is mounted into the DOM so try calling your initialization function in the created method instead

Collectives™ on Stack Overflow

Proper MaterializeCSS initialization in VueJS Project

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related