UPDATED ...
I'm trying to use imported object in my nuxt.config.js This is Nuxt.js configuration file.
I have this: seo.js
export default {
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/img/favicon.ico',
},
],
meta: [
{
charset: 'utf-8'
}
]
}
Then in nuxt.config.js:
import seo from './seo'
export default {
head() {
return {
...seo,
}
},
... other config setting ...
}
Then I'm getting an error: "_seo is not defined" I'm not trying to export head as function, this is config file and there are more settings.
While this works, nuxt.config.js:
import seo from './seo'
export default {
head: {
...seo,
}
}
... other config settings ...
}
It seams that I can't use imported object in function. I'm confused, what is the problem here and how can I use that imported object?
Change you nuxt.config.js to the following
import seo from "./seo";
export const head = () => {
return {
...seo
};
};
export default head;
I have put this on a code sandbox, if you look at the console log it is outputting the correct information
https://codesandbox.io/s/vigilant-almeida-j8dyq?file=/src/App.js
Instead of exporting head as a method of the default object, you can directly default export the function
import seo from "./seo";
export default function() {
return {
...seo
};
};
for such exports, it is recommended to use the named export.
export const links = [
{
rel: 'icon',
type: 'image/x-icon',
href: '/img/favicon.ico',
},
]
And Import it as follow:
import {seo} from './seo'
export default {
head: {
...seo,
}
} }