Menu icon Foundation
Foundation 6.4 + MixItUp

Hi All, 

Im trying to include mixitup 3 into foundation. - https://github.com/patrickkunka/mixitup/

Im having some issues instantiation the var in my app.js.

 

    var containerEl = document.querySelector('.container');

    var mixer = mixitup(containerEl);

 

I can see within my app.js that the plugin code has been included, but I get an  "Uncaught ReferenceError: mixitup is not defined" error message.

 

Any help would be grateful.

 

Martin

 

 

npmwebpack

Hi All, 

Im trying to include mixitup 3 into foundation. - https://github.com/patrickkunka/mixitup/

Im having some issues instantiation the var in my app.js.

 

    var containerEl = document.querySelector('.container');

    var mixer = mixitup(containerEl);

 

I can see within my app.js that the plugin code has been included, but I get an  "Uncaught ReferenceError: mixitup is not defined" error message.

 

Any help would be grateful.

 

Martin

 

 

Kevin Ball 2 months ago

Hi Martin,

Can you post a little more detail around how you're adding mixitup to your app.js? If you're using Foundation 6.4 and using the webpack enabled build, you'll want to make sure you're importing mixitup directly into the file. Looking at their docs, it looks like you should be able to just do this:

 

import mixitup from 'mixitup';

 

For more context around how the JavaScript works in newer versions of Foundation, check out the JavaScript portion of this comprehensive walkthrough of the ZURB template.

Martin McGlade 2 months ago

Hi Kevin, 

Thanks for the reply.

Yeah, i'm doing just what you've shown above and added the line into the app.js file.

My issue is how to instantiate the mixer.

Ive followed the demo and added the the following to the html page, but I get a Uncaught reference.

 

<script>
  var containerEl = document.querySelector('.container');
  var mixer = mixitup(containerEl);
</script>

Kevin Ball 2 months ago

Hey Martin - This is confusing a lot of folks, so I recorded a quick walkthrough video - let me know if this helps: https://www.youtube.com/watch?v=cc3eJ4_fUmw