Kal
Reading public env var in lib script
Basically, Nuxt provides the possibility of passing env values into the app at runtime, but you need to still pass it in some fashion. I would think a wrapper does that (a bridge between Nuxt and vanilla JS). Absolute worst-case scenario, on app mount, you could look at dumping public env values into the browser window object and pull from that globally from any JS, anywhere.
13 replies
NuxtImg from assets folder
That's interesting about dev vs prod and is another hint this issue related to
baseUrl being a problem. For any IT project, when going from dev to prod, base path issues are very common; I've encountered it many times.
To re-iterate, for my own app I don't specify any vite baseUrl and it's deployed to Heroku without issues. I can imagine that maybe in another deployment context may require baseUrl (especially if there's multiple apps) where the app may not occur in root, but in a sub-folder. In any case, on a side note, it's strange that you have "_nuxt" hardcoded; this is not an advisable practice as anything that starts with underscore is usually volatile. What is the reason for that? I then ask, why is the project so special to warrant strange things?
I have no answers for you, just food-for-thought to chew on.
Re: The img src url "/public/" folder, is actually not Nuxt at all but occurs remotely on the imgix instance.
My baseURL: process.env.IMAGEBASEURL is an external url (imgix, where my images are hosted).16 replies
NuxtImg from assets folder
I would first scrutinize the Vite base URL aspect. Maybe you need this, maybe not, but that's one possible fault point.
Anyways, as a reference below is my working Nuxt3+NuxtImage code, even though slightly different than yours. For Vite, I didn't specify a baseURL.
nuxt.config.ts
//...
modules: ['@nuxt/image'],
//...
image: {
domains: [process.env.WEBSITEBASEURL],
imgix: {
baseURL: process.env.IMAGEBASEURL
}
}
//...
Any Vue component
<NuxtImg provider="imgix" :src="'/public/marketing/someMarketingImage123.jpg'"
fit="cover" :modifiers="{ auto: 'format,compress' }" />16 replies
How to get page title globally when using useHead() ?
My memory is vague but looking at the post date I think I was still using Vue2 at the time.
Anyhow, testing in Nuxt3 just now, looks like things are easier/work as you expect:
1. Set a page title dynamically, somewhere:
definePageMeta({
title: 'My page title'
})
2. Somewhere else, grab the page title as you need:
(Script)
const route = useRoute()
(Template)
{{ route.meta.title }}4 replies