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 ?
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c6818">#c6818</a>)</em></sub></div>