Menu icon Foundation

Engineer

My Posts

No Content

My Comments

Bren commented on Martin's post about 2 years

For those of you using Webpack, this is what I did. Well, there is more than one way to do this. This is the old way I was doing it. In webpack.config.js:
// Make jQuery / $ global
// See: https://webpack.js.org/plugins/provide-plugin/
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
This is optional, but helps make the imports a bit cleaner:
resolve: {
alias: {
'foundation.core': 'foundation-sites/js/foundation.core',
// Other plugins. Each plugin requires what it needs.
// 'foundation.reveal': 'foundation-sites/js/foundation.reveal',
jquery: 'jquery/src/jquery'
}
}
Then in your app:
import { Foundation } from 'foundation.core'

// Adds foundation() function to jQuery.
// $ is global
// This was KEY for me getting 6.4 to work.
Foundation.addToJquery($)

$(document).ready(function () {

$(document).foundation()
}
I cleaned up my Webpack config further by removing ProvidePlugin and doing this:
// If you omit the resolv.alias from above:
// import $ from 'jquery/src/jquery'
// import { Foundation } from 'foundation-sites/js/foundation.core'

import $ from 'jquery'
import { Foundation } from 'foundation.core'

// Adds foundation() function to jQuery.
// This was KEY for me getting 6.4 to work.
Foundation.addToJquery($)

$(document).ready(function () {

$(document).foundation()
}
 
For those NOT using Webpack, I could probably set up a step by step guide / repo on Github if interested.

Bren commented on Stéphane Richin's post about 2 years

Try this:
import { Foundation } from 'foundation-sites/js/foundation.core';
import { Reveal } from 'foundation-sites/js/foundation.reveal';

// Assuming jQuery is loaded as a global $
// See: https://webpack.js.org/plugins/provide-plugin/
// This was the KEY to getting Foundation 6.4 working for me.
Foundation.addToJquery($);

const element = new Reveal($('#element'));
// element.open();
// See: http://foundation.zurb.com/sites/docs/javascript.html

// This might also be necessary.
$(document).ready(function () {
// This ONLY works when .addToJquery is called above!
$(document).foundation();
}

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Martin's post about 2 years

For those of you using Webpack, this is what I did. Well, there is more than one way to do this. This is the old way I was doing it. In webpack.config.js:
// Make jQuery / $ global
// See: https://webpack.js.org/plugins/provide-plugin/
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
This is optional, but helps make the imports a bit cleaner:
resolve: {
alias: {
'foundation.core': 'foundation-sites/js/foundation.core',
// Other plugins. Each plugin requires what it needs.
// 'foundation.reveal': 'foundation-sites/js/foundation.reveal',
jquery: 'jquery/src/jquery'
}
}
Then in your app:
import { Foundation } from 'foundation.core'

// Adds foundation() function to jQuery.
// $ is global
// This was KEY for me getting 6.4 to work.
Foundation.addToJquery($)

$(document).ready(function () {

$(document).foundation()
}
I cleaned up my Webpack config further by removing ProvidePlugin and doing this:
// If you omit the resolv.alias from above:
// import $ from 'jquery/src/jquery'
// import { Foundation } from 'foundation-sites/js/foundation.core'

import $ from 'jquery'
import { Foundation } from 'foundation.core'

// Adds foundation() function to jQuery.
// This was KEY for me getting 6.4 to work.
Foundation.addToJquery($)

$(document).ready(function () {

$(document).foundation()
}
 
For those NOT using Webpack, I could probably set up a step by step guide / repo on Github if interested.

You commented on Stéphane Richin's post about 2 years

Try this:
import { Foundation } from 'foundation-sites/js/foundation.core';
import { Reveal } from 'foundation-sites/js/foundation.reveal';

// Assuming jQuery is loaded as a global $
// See: https://webpack.js.org/plugins/provide-plugin/
// This was the KEY to getting Foundation 6.4 working for me.
Foundation.addToJquery($);

const element = new Reveal($('#element'));
// element.open();
// See: http://foundation.zurb.com/sites/docs/javascript.html

// This might also be necessary.
$(document).ready(function () {
// This ONLY works when .addToJquery is called above!
$(document).foundation();
}

Posts Followed

Following

  • No Content

Followers

  • No Content