Eric
Eric
Explore posts from servers
KPCKevin Powell - CommunityNNuxt
PostsComments
NNuxt
Created by Eric on 7/30/2024 in #❓・help
how to proxy url's used in IMG tags?
We can proxy our api url using the server folder. But how do we proxy url's used in img tags? I don't want these url's to be publicly exposed... Thanks!
1 replies
NNuxt
Created by Eric on 7/26/2024 in #❓・help
In the image module, is the baseUrl of a provider public ?
When setting up the baseUrl of a provider in the image module, you define it in the nuxt.config.ts file. Will this url be publicly exposed ? or is it hidden server side?
1 replies
NNuxt
Created by Eric on 7/26/2024 in #❓・help
Proxying asset url from Directus
hello ! I watched this tutorial by Alexandre Lichter : https://www.youtube.com/watch?v=J4E5uYz5AY8 and it works great! But I'm now wandering how to proxy urls in image tags . I have a Directus backend that holds data and images. By setting up a proxy, my nuxt app can just get data from the /api/items endpoint and the request is automatically redirected to the Directus backend. Great ! 
  const { data } = await useFetch('/api/items/Blogs', { server: false} )
  const { data } = await useFetch('/api/items/Blogs', { server: false} )
This will return data from https://mydirectus.com/items/Blogs It also works for anchor tags: 
  <a href="/api/items/Blogs">
    Blogs
  </a>
  <a href="/api/items/Blogs">
    Blogs
  </a>
This will show you the json from this endpoint. Perfect! But I tried this: 
  <img src="/api/assets/imageId ">
  <img src="/api/assets/imageId ">
And it doesn't work. Shoot! "Does ths file really exists ?" it asks. What would be the right way to get the image without directly accessing https://mydirectus.com/assets/imageId ?
2 replies
NNuxt
Created by Eric on 5/3/2024 in #❓・help
Middleware for OUTGOIN requests ?
from what I understand, middlewares run on every route change. But I would like a piece of code to run every time a request is made to the file storage that live on different domains. I would like to intercept to request made by img tags to set the authorization header... Is there a way to create that ?
6 replies
NNuxt
Created by Eric on 4/16/2024 in #❓・help
UseAsyncData with a request params defined by a computed property ?
Should that work ? directusGetItems is a function I defined using the directus base url. I would like to use the computed prop to modify the requestParams in the UI. in this example, it's not reactive, but this non reactive version is not working. It doesn't fetch data on page load. Is it possible to use useAsyncData with a computed prop ? 
const requestParams = computed(() => {
    const params = {
        fields: [ '*' ],
        sort: '-date_created',
        limit: 25
    }

    return params;
});

const { data: meals } = await useAsyncData(
    "meals",
    async () => {
        const items = await directusGetItems('Meals', requestParams.value );

        return items;
    }, {
        watch: reqParam,
        server: true 
    }
);
const requestParams = computed(() => {
    const params = {
        fields: [ '*' ],
        sort: '-date_created',
        limit: 25
    }

    return params;
});

const { data: meals } = await useAsyncData(
    "meals",
    async () => {
        const items = await directusGetItems('Meals', requestParams.value );

        return items;
    }, {
        watch: reqParam,
        server: true 
    }
);
9 replies
NNuxt
Created by Eric on 4/9/2024 in #❓・help
SSR and cookies
How do cookies work with SSR ?
1 - user tyes website.com in the browser 2 - the browser sends a cookie along 3 - the nuxt app receives the request and retreives the access_token from the cookie 4 - te nuxt app makes a request to the directus server 5 - the directus server sends back a response containing data and maybe a set-cookie rule 6 - the nuxt app renders the page and sends it to the browser with the set-cookie rule 7 - the browser shows the page and creates a new cookie does that make sence ? I'm trying to figure out how to authenticate to directus in a nuxt app.
8 replies
NNuxt
Created by Eric on 3/6/2024 in #❓・help
Error with i18n and sitemap
I get this error : "Plugin nuxt-site-config:i18n depends on i18n:plugin but they are not registered. " when trying to use the sitemap module alongside i18n: Everyting seems to work fine, though.
Both i18n and sitemap work just fine ..; Any idreas?
1 replies
NNuxt
Created by Eric on 2/29/2024 in #❓・help
How to disable the nuxt-loading-enable-animation local storage ?
my nuxt app sets this value in local storage: nuxt-loading-enable-animation = true How can I disable this ?
My app asks permission to use local storage, but this value is set before the user grants or refuses permision. Also, is there a proper nuxt way of requesting permission for cookies and local storage ? I'm using i18n, but it doesn"t seem to offer a way to wait until permission is granted before storing a cookie.
1 replies
NNuxt
Created by Eric on 2/24/2024 in #❓・help
Page transition
Is it possible to set the page transition of th 'from' page based on the 'to' route ? let's say you are on /about. then, you click to navigate to /contact. Can I use a onBeforeRouteLeave to change the pageTransition of /about ? The docs explain that we can dynamicaly change the transition of the 'to' route, but doesn't say anything for the 'from' route... Also, can we set two transitions for a page? in and out transitions ?
2 replies
NNuxt
Created by Eric on 6/9/2023 in #❓・help
Footer flash when navigating to other page
On a project, I have this weird problem. I have a bunch of pages and I use a default layout for most of them. The footer and the top bar are set inside this default layout, but the body is being built in the page file. If I click on a link, because the body of the page takes some time to load because of some data being fetched from the db, the footer comes all the way up for a brief moment creating what I call a "footer flash" :-). I tried putting a min-height on the body, but it would need to be at least 200vh, but it doesn't seem to do anything. And it doesn't seem like a very good practice. Is there a nuxt/vue way of making sure the footer doesn't jump all the way up on every navigation? thanks! eric
3 replies
NNuxt
Created by Eric on 4/14/2023 in #❓・help
Cache problem, I think
I have a nuxt app working with directus. On the homepage of my app (ssr = true), I have a component that fetched the 3 last news that were added to directus. But, when I add a news to directus, even if I refresh my app's homepage, I don't get the newly added news, I get the tree next one because (I think) nuxt serves me a cached version of the page. The app is hosted on netlify. I'm still a bit new to nuxt and SSR and I'm not sure where the problem comes from nuxt or netlify. Could someone help me out understanding where the problem might come from? thanks in advance! eric
1 replies
NNuxt
Created by Eric on 3/15/2023 in #❓・help
Problem since I updated to nuxt 3.3
I get erro messages when starting the dev server: 1 - Failed to load url (... long path to file... ) .nuxt/paths.mjs. Does the file exist? 2 - node_modules/defu/dist/defu.mjs" is outside of Vite serving allow list I reseatched it, but couldn't find a orking solution..; any ideas? thanks
109 replies
NNuxt
Created by Eric on 2/26/2023 in #❓・help
v-html not loading content
hi! I import content from a rich text editor in Directus and inject it through v-html in my web page. But, the content doesn't load when the page is loaded (SSR) <di :v-html="item.content"> </div> If I make any type of change in the code and save it, the page is updated, the v-html wakes up and the content gets injected properly. If I reload the page in the browser, the problem comes back. I suppose I'm just missing something, but I can't figure out what it is. Any of you know how to make this work? thanks! eric
4 replies
NNuxt
Created by Eric on 2/9/2023 in #❓・help
renaming index.vue
Hi! By default, the route for the index.vue file is "/". What if I want the route to be "mysite.com/home" ? Is there a way to achieve that? Thanks, eric
5 replies
NNuxt
Created by Eric on 1/27/2023 in #❓・help
cookies policy?
I building a small website with no authentication or ads. Just a place the users can go and find information about a small business. I don't intentionally store data in local storage. Is nuxt using cookies behind the hood? What approval must I get from the user regarding cookies? thanks! eric
8 replies
NNuxt
Created by Eric on 1/26/2023 in #❓・help
browser hook?
What would be the correct way to trigger a function once the page is loaded in the browser, after SSR? I'm not sure I'm understanding well how ssr and onMounted work together. onMounted triggers once the component is loaded. But if the page is rendered server side, then onMounted would ... be triggerred on the server side? Is there a "pageLoadedInTheBrowser" hook? I'm working on a component containing on scroll animations. I want to grab a list of elements with querySelectorAll (or is there a better way?) and apply them an observer with IntersectionObserver(). Thanks for your help! eric
5 replies
NNuxt
Created by Eric on 1/17/2023 in #❓・help
images in public forlder?
My images are stored in public/images/my-image.jpg Is there a problem with that? My app is deployed to netlify from it's gihub repo. But the deploys fail with an error saying : [vite]: Rollup failed to resolve import "images/enveloppe.jpg" from "pages/contact.vue". 10:30:41 PM: This is most likely unintended because it can break your application at runtime. It works fine locally, but won't deploy to netlify. Any idea? thanks! eric
14 replies
NNuxt
Created by Eric on 1/9/2023 in #❓・help
Data no loading when refreshing the page
Hello! I have a small problem that is really bugging me. I use pinia to store all the data imported from DIrectus. In my components I simply have this: import { useItemStore } from '@/stores/items'; const itemStore = useItemStore() const items = ref(itemStore.getItems) then, I iterate through the items with a v-for to render all my items. Straight forward and classic I think. It works fine but if I refresh the page, then it doesn't render and nothing appears on the page. Then if I navigate to another page and I come back, it works just fine and all items are shown. I thaught that because refs are reactive, the DOM is supposed to update whenever the ref is updated. Am I wrong? And I'm not quite sure if I need to use refs or not... I probably miss a small detail, but I can't figure it out. Anyone knows the solution to this problem?
21 replies
NNuxt
Created by Eric on 1/8/2023 in #❓・help
background-image path?
hello! I have a div with a background-image so I put this: background-image: url("_nuxt/assets/images/my-image.jpg"); It works fine when I first visit the page, but if I reload, then I get an error. I suppose I'm not using the right url? What's the solution to this? thanks in advance! Eric
4 replies