Home

What is the proper way to get Foundation Sites working with Nuxt.

https://github.com/vue-foundation/vue-foundation shows how to get Foundation working with a SPA based on the vue-cli template.

When it comes to nuxt, I tried repeating a similar kind of approach. But I am unsure if this will actually work

//added the the following entries to the package.json to include foundation, jquery and motion ui

“dependencies”: {
“nuxt”: “^1.0.0”,
"@nuxtjs/axios": “^5.0.0”,
“foundation-sites”: “^6.4.3”,
“jquery”: “^3.2.1”,
“motion-ui”: “^1.2.3”,
“optimize-css-assets-webpack-plugin”: “^3.2.0”
},
“devDependencies”: {
“babel-eslint”: “^8.2.1”,
“cross-env”: “^5.0.1”,
“eslint”: “^4.15.0”,
“eslint-loader”: “^1.7.1”,
“eslint-plugin-vue”: “^4.0.0”,
“node-sass”: “^4.8.3”,
“sass-loader”: “^6.0.7”
}

//Created a scss folder in the assets folder and added the file app.scss to it

//Added the following to the app.scss

// Settings
@import “settings”;

// Foundation
@import ‘~foundation-sites/scss/foundation’;

// Include Everything (True) for the Flex Grid 😃;
@include foundation-everything(true);

// Import Motion UI
@import ‘~motion-ui/dist/motion-ui’;

// I copied the settings.scss from foundation-sites from the node_modules and added it to the assets folder.

//In the nuxt.config.js file I then added the Global css

css: [
"…/assets/scss/app.scss"
],

I now need to add the javascript part of foundation which is tricky. Can someone please help ?