How to trigger $('.button-collapse').sideNav('hide'); in vuejs 2 without jQuery?

Question

I have successfully added the following code which provides me with the sideNav from materialise:

<v-btn-link v-side-nav:side-nav="nav" class="button-collapse btn-flat" id="btn-side-menu"><i class="material-icons">menu</i></v-btn-link>
<v-side-nav id="side-nav" class="hide-on-small">
  <a v-on:click="handleNavDashboard()">Dashboard</a>
  <a v-on:click="handleLogout()">Logout</a>
</v-side-nav>

and I use the following methods:

  methods: {
    handleLogout () {
      console.log('LOGGED OUT')
      this.$store.dispatch('clearAuthUser')
      window.localStorage.removeItem('authUser')
      this.$router.push({name: 'login'})
    },
    handleNavDashboard () {
      console.log('GOING DASHBOARD')
      console.log(this)
      this.$router.push({name: 'dashboard'})
    }
  }

so when I am on the home page and i click Dashboard, I get the dashboard contents on the screen but the sideNav menu and the darkened background are still there. Materialise-css says you can use this function

$('.button-collapse').sideNav('hide');

to hide it progmatically but I don't have jQuery installed. How to I reset the sideNav after a nav click?

You may find the Vue version useful: johnleider.com/vue-materials-docs — craig_h
– craig_h, Commented Jan 4, 2017 at 10:44
@craig_h It is that version that I am using. I am also trying other SO answers to get jQuery working in my app but no luck there either. — khany
– khany, Commented Jan 4, 2017 at 12:11
@khany Are you using npm, it looks like you will need to load jQuery globally, is that what you're having trouble with? — craig_h
– craig_h, Commented Jan 4, 2017 at 12:43

t_dom93 · Accepted Answer · 2017-01-05 15:23:37Z

2

CDN

From Materialize docs:

One last thing to note is that you have to import jQuery before importing materialize.js!

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

NPM

Much better way, install jQuery via npm :

npm install jquery

and use webpack ProvidePlugin to make jQuery global module available in all of your files
here is sample of webpack.config.js file

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

In Vue.js DOM manipulations are encapsulated inside directives, you can use conditional rendering directives v-if or v-show to make this work without using jquery:

jsFiddle example

Also check component framework Vuetify.js that provide clean, semantic and reusable components.

edited Jan 5, 2017 at 15:23

answered Jan 4, 2017 at 13:26

t_dom93

11.6k3 gold badges56 silver badges40 bronze badges

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

2 Comments

khany Over a year ago

@t-dom93 genius! Never thought to write my own side-nav, but now I have. It's crude but does the job. Thanks for the inspiration.

t_dom93 Over a year ago

Glad to help you! Please consider to accept answer if it was helpful for you. Thanks

craig_h · Accepted Answer · 2017-01-04 13:01:27Z

1

If you want to include jQuery in to a project which is using requires or imports, then you need to make sure it's required and not included using script tags, because it will be outside the scope of the compiled code (unless it was shimmed), so add the following to your project:

ES6 syntax:

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery

ES5 Syntax:

window.$ = window.jQuery = require('jquery');

And make sure you have installed jQuery:

npm install jquery --save-dev

This puts jQuery into the global scope so it can be used site wide. The docs for that package don't really make that clear, and for some reason they don't mention that jQuery is a dependency, but looking at the code it clearly is for some of the components.

edited Jan 4, 2017 at 13:01

answered Jan 4, 2017 at 12:55

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

Comments

Stefano Nepa · Accepted Answer · 2017-01-04 22:37:10Z

0

If you don't want to use JQuery and Materialize, you can use the directive :v-show="showAside" or :v-if="showAside" with a property like showAside (in data) and handle the value with a click.

There is a very quick and cheap example: https://jsfiddle.net/nosferatu79/p85rw6xz/

edited Jan 4, 2017 at 22:37

answered Jan 4, 2017 at 14:04

Stefano Nepa

5001 gold badge7 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to trigger $('.button-collapse').sideNav('hide'); in vuejs 2 without jQuery?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related