Nuxt v2 (VueJS) compatibility, how to setup Rivet?

[ryzen3100]

Hi,
I'm trying to setup Rivet on Nuxt v2, so far without success.
Using sass from npm package does style the site, but dynamic parts like the hamburger menu does not work/expand.
Same problem when using CSS variant, and if I import the JS library then I get this error: "ReferenceError, Element is not defined".

Example using Sass: https://codesandbox.io/s/gallant-snow-44sz28?file=/components/myHeader.vue

[levimcg]

@ryzen3100 I don't have a ton of experience with Vue/Nuxt, but it looks like you aren't actually importing and/or referencing rivet.js anywhere in your pages or components. You can either reference the rivet javascript file somewhere in your templates via a <script> tag, or import the individual modules that you want to use in your Vue components. Ex. import { Dropdown } from 'rivet-core'.

If you are importing modules into your components then you'll probably want to do any set up or initialization required in the Vue component's mounted (or whatever it's called these days) lifecycle method. Your best bet will probably be to do all your importing in your main or common page component you are using to render all the views in your app.

Here are some docs on the different ways you can use the JavaScript that ships with Rivet. This might help you better understand what all you have.

https://rivet.iu.edu/getting-started/using-rivet-javascript/