Victor Neves Posts - Answer Overflow

Victor Neves

•Created by Victor Neves on 11/25/2024 in #❓・help

Props set on route contains an extra default key

Hi all I'm migrating a Vue 3 SSR project to Nuxt and I'm seeing a different behavior when defining the props on a route. e.g:

{
    name: 'vertragsauswahl',
    path: '/vertragsauswahl',
    components: {
        default: () => import('~/components/ContractSelection/ContractSelection.vue'),
    },
    meta: {
        trackingId: 'ContractSelection',
        layout: 'MasterLayout',
        isRestricted: true,
        middleware: [...PROTECTED_MIDDLEWARE_LIST],
    },
    props: {
        default: contractSelectionStaticContent,
        servicesheet: contractSelectionStaticContent,
    },
},

{
    name: 'vertragsauswahl',
    path: '/vertragsauswahl',
    components: {
        default: () => import('~/components/ContractSelection/ContractSelection.vue'),
    },
    meta: {
        trackingId: 'ContractSelection',
        layout: 'MasterLayout',
        isRestricted: true,
        middleware: [...PROTECTED_MIDDLEWARE_LIST],
    },
    props: {
        default: contractSelectionStaticContent,
        servicesheet: contractSelectionStaticContent,
    },
},

When checking the data from the route on Nuxt this is generating

props: {
    default: {
        default: {
            id: 'some-id',
            name: 'some-name',
            type: 'some-type',
            value: 'some-value'
        },
        servicesheet: {
            id: 'some-id',
            name: 'some-name',
            type: 'some-type',
            value: 'some-value'
        }
    }
}

props: {
    default: {
        default: {
            id: 'some-id',
            name: 'some-name',
            type: 'some-type',
            value: 'some-value'
        },
        servicesheet: {
            id: 'some-id',
            name: 'some-name',
            type: 'some-type',
            value: 'some-value'
        }
    }
}

instead of

props: {
    default: {
        id: 'some-id',
        name: 'some-name',
        type: 'some-type',
        value: 'some-value'
    },
    servicesheet: {
        id: 'some-id',
        name: 'some-name',
        type: 'some-type',
        value: 'some-value'
    }
}

props: {
    default: {
        id: 'some-id',
        name: 'some-name',
        type: 'some-type',
        value: 'some-value'
    },
    servicesheet: {
        id: 'some-id',
        name: 'some-name',
        type: 'some-type',
        value: 'some-value'
    }
}

I do also have a prop where I do props: true but when rendering the route I get a warning saying that the required prop is undefined Anyone has an idea of what's going on? Thanks

6 replies

NNuxt

•Created by Victor Neves on 7/10/2024 in #❓・help

[nuxt] Could not access `nitro`

Has anyone faced similar problem? [nuxt] Could not access nitro. The only available runtime config keys on the client side are public and app. See https://nuxt.com/docs/guide/going-further/runtime-config for more information. To test, I removed the client plugins (even the sever plugins) and also moved all keys into public and still get this warning on the browser console when running dev mode. Any help would be appreciated Thanks

12 replies

NNuxt

•Created by Victor Neves on 6/7/2024 in #❓・help

How to deploy Nuxt 3 SSR app into Azure DevOps

Hi, can anyone give some tip how to deploy a Nuxt 3 SSR into Azure (not static app)? Thanks

1 replies

NNuxt

•Created by Victor Neves on 4/18/2024 in #❓・help

[solved] <NuxtPage name="some-name" /> not working

Hi all I'm migrating a Vue 3 project to Nuxt 3 and I'm currently facing a problem with making <NuxtPage name="some-name" /> work Here's a reproduction where you can what I'm trying to achieve. From what I saw on the docs this is the right way, but not sure if I need to update something on the route structure https://stackblitz.com/edit/nuxt-starter-z7j8fy?file=app%2Frouter.options.js Thanks

27 replies

NNuxt

•Created by Victor Neves on 4/2/2024 in #❓・help

how to generate static HTML pages just for some of the routes

I'm trying to generate 4 static HTML pages from a huge list of routes that the app has But I only see info for pre-render and a nuxi command (nuxi generate) also for pre-render and not for pure static HTML. One note, 99,99% of the routes I fetch from the server, and doing that using the pages:extended hook as it contains async requests and it was the only way I found to avoid the "double request" (server and then on the client) Thanks

10 replies

NNuxt

•Created by Victor Neves on 4/1/2024 in #❓・help

add class to default root div __nuxt

Hi, I'm migrating a VUE 3 SSR project to Nuxt 3 and saw that Nuxt adds a rot div that we don't have direct access as we have on Vue as there's no index.html Looking at the docs I see that we can change the ID and tag name using rootId and rootTag This has to do with the fact that we have a class applied to that HTML element to put the footer on the bottom of the page when the content on the main "div" isn't enough to fill the page. Currently, I'm doing it on "jquery" way, but I don't think it's the best way to do it as I didn't see any other option I'm wondering if something like rootClass couldn't be added to prevent doing the way I had to do it I would say this would be very helpful @moderator thanks

27 replies

NNuxt

•Created by Victor Neves on 3/27/2024 in #❓・help

Using $fetch inside app folder to get the the list of routes

Currently, I'm using this approach to get the list of the routes https://nuxt.com/docs/guide/going-further/custom-routing#router-options Looking into the docs for me it's not clear if using $fetch inside the app folder to get the list of routes from the server will also triggered on the client or if it works as the useFetch that transfers state from the server to the client Can someone clarify me on this? Thanks

2 replies

NNuxt

•Created by Victor Neves on 3/19/2024 in #❓・help

Vue Suspense component shouldn't be used on Nuxt?

Hi I'm currently migrating a Vue 3 SSR project to Nuxt 3 and on the current project we are using the Vue Suspense component But from what I see on the docs, if I didn't get it wrong we should use it in Nuxt, is that right?

<template>
    <Suspense><TheHeader /></Suspense>
    <slot></slot>
    <ClientOnly><NotificationContainer /></ClientOnly>
    <Suspense><TheFooter /></Suspense>
</template>

<template>
    <Suspense><TheHeader /></Suspense>
    <slot></slot>
    <ClientOnly><NotificationContainer /></ClientOnly>
    <Suspense><TheFooter /></Suspense>
</template>

Thanks

1 replies

NNuxt

•Created by Victor Neves on 3/15/2024 in #❓・help

javascript added using useHead is being executed on the server

I have a javascript to be executed on the client to check the browser version and also if some functionalities are available and if not match the criteria we redirect the user to a dedicated page (informing the user that he needs to update the browser) But I see that the code added to the script tag is being executed on the server and being changed original:

if (typeof window !== 'undefined') {
 ...
}

if (typeof window !== 'undefined') {
 ...
}

then turns into:

if ("undefined" !== 'undefined') {
 ...
}

if ("undefined" !== 'undefined') {
 ...
}

How can I prevent/fix this? Thanks

22 replies

NNuxt

•Created by Victor Neves on 3/5/2024 in #❓・help

Is anyone using application insights with Nuxt 3?

Does anyone have applications insights working with Nuxt to track and log on the client and server? I'm having problems to setup it for the server and I'm not sure if it's related to the fact that the package doens't have support for ESM I have created a nitro plugin, but when running the build preview I get an error saying that cannot find the module 'applicationinsights' This is how we import the module and it's works on our Vue 3 SSR project

import { createRequire } from 'module';
// common js import, of appinsights. no esm support for now
const isomorphicRequire = createRequire(import.meta.url);
const appInsights = isomorphicRequire('applicationinsights');

import { createRequire } from 'module';
// common js import, of appinsights. no esm support for now
const isomorphicRequire = createRequire(import.meta.url);
const appInsights = isomorphicRequire('applicationinsights');

` Thanks

11 replies

NNuxt

•Created by Victor Neves on 3/4/2024 in #❓・help

server middleware added to nuxt config

Hi all The docs say "Nuxt will automatically read in any file in the ~/server/middleware to create server middleware for your project." My question is, should I still added to nuxt.config like this?

server: {
    middleware: ['auth.ts'],
},

server: {
    middleware: ['auth.ts'],
},

Thanks

3 replies

NNuxt

•Created by Victor Neves on 2/2/2024 in #❓・help

TS config compilerOptions

Hi all I'm facing an error while migrating my Vue 3 SSR project to Nuxt 3 ERROR: Top-level await is not available in the configured target environment My ts config file

{
    "extends": "./.nuxt/tsconfig.json",
    "compilerOptions": {
        "target": "ESnext",
        "module": "ESnext",
    },
    // ... everything else
}

{
    "extends": "./.nuxt/tsconfig.json",
    "compilerOptions": {
        "target": "ESnext",
        "module": "ESnext",
    },
    // ... everything else
}

Am I missing something? Thanks

3 replies

NNuxt

•Created by Victor Neves on 12/30/2022 in #❓・help

router-view v-slot={ Component }

hi all I'm working on an SSR project with Vue 3 and since nuxt already has Vue 3 I was trying to do a copy of the project using nuxt. The project uses a server driven ui approach, so basically everything comes from the server (we don't have defined pages, the content of each page is defined on the backend where the editor chooses the components and the content for each one of them) So, on app.vue we have something like this:

<template>
    <component :is="layout">
        <router-view v-slot="{ Component }">
            <Suspense>
                <main class="base-main">
                    <component :is="Component" />
                </main>
            </Suspense>
        </router-view>
    </component>
</template>

<template>
    <component :is="layout">
        <router-view v-slot="{ Component }">
            <Suspense>
                <main class="base-main">
                    <component :is="Component" />
                </main>
            </Suspense>
        </router-view>
    </component>
</template>

When I try to run the app I get an error on 'Component' I already updated the template to this but i still get the same error:

<template>
    <NuxtLayout :is="layout">
      <Nuxt v-slot="{ Component }">
          <Suspense>
            <main class="base-main">
              <component :is="Component" />
            </main>
        </Suspense>
      </Nuxt> 
    </NuxtLayout>
</template>

<template>
    <NuxtLayout :is="layout">
      <Nuxt v-slot="{ Component }">
          <Suspense>
            <main class="base-main">
              <component :is="Component" />
            </main>
        </Suspense>
      </Nuxt> 
    </NuxtLayout>
</template>

So my question is, what's the correct way to replace the '<router-view v-slot="{ Component }">'? Thanks

4 replies

Gaming

Programming