Hello ! I tried but i didn't succeed :(
I installed it with npm install foundation-sites --save-dev
Followed what it's said in the documentation here : nuxtjs.org/api/configuration-css
css: [
{ src: 'foundation-sites', lang: 'scss' },
{ src: '~assets/scss/main.scss', lang: 'scss' }
]
It does not work :/
Vijai Karpe
I am trying the same, but have not been able to get it to work. Here is what I am doing:
Procedure - Copy the _setting.scss file from foundation-sites in the node_modules into the assets folder.
//Modify the import to foundation-sites
@import '~foundation-sites/scss/util/util';
Procedure - Create an app.scss file in the assets folder
Add the following code to the app scss file
{code}
// This file gets 'supposedly' imported in every component by the nuxt.config.js in the part css[ "../assets/app.scss" ] as per the nuxt documentation
// 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';
{code}
Add the following code to the nuxt.config.js
css[ "../assets/app.scss" ]
Procedure - Add a global.scss file in the assets and the following code
Note This must be included into your main root components for each page component in the folder pages
{code}
// Init Foundation @include foundation-everything(true);
// Import Motion UI @import '~motion-ui/dist/motion-ui';
{code}
Procedure - Put the foundation.js file from github.com/vue-foundation/vue-foundation/blob/mas… in the plugins folder
Procedure - Intitialize Foundation by creating a file called foundationInit.js and put in the following code
{code} import Vue from 'vue' import foundation from './foundation';
Vue.use(Foundation); export default Foundation;
{code}
In the nuxt.config.js file put in the following in the plugins section and set the server side rendering to false as Foundation is a client side framework (not sure if this is good for SEO and defeats the purpose of SSR)
plugins: [ { src: '~/plugins/foundationInit.js', ssr: false} ],
Now I get an error associated to importing foundation js in webpack
{ statusCode: 404, path: '/foundation-sites/dist/js/foundation.js', message: 'This page could not be found' }
I am newbie into the webpack and javascript world, I really like to Foundation and Vue and would like to use them as a part of Nuxt's implementation.
Probably, what I've done is wrong, I've tried to extend Tommaso Marcelli's solution:
medium.com/@tommaso.marcelli/setting-up-vue-2-and… github.com/vue-foundation/vue-foundation