Wontolla Posts - Answer Overflow

Wontolla

•Created by Wontolla on 10/15/2024 in #❓・help

`nuxt/storybook` does not work

nuxt/storybook has some big problems: - Installation (jsdoc-type-pratt-parser) - Rendering with the template - Suspense with nuxt/icon - Self-documentation In short, almost nothing works. I tried to find workarounds for every single problem and I can't get out of it. It's a dog chasing its tail. Can anyone point me to a version (even an old one) where everything more or less works? Or an alternative solution ES: don't use the nuxt module but vue-vite. The problem is that I don't know how to integrate it with Nuxt (eg: it requires the Vite setting) Thanks

6 replies

NNuxt

•Created by Wontolla on 6/13/2023 in #❓・help

v-for doesn't work on change layout

When navigate to a route with a different layout, and there's a v-for with a ref() list inside the page, then return a vue warn and a error. Reproduction https://stackblitz.com/edit/v-for-layout?file=layouts%2Fdefault.vue How can i solve this issue?

1 replies

NNuxt

•Created by Wontolla on 5/10/2023 in #❓・help

Preload Assets from nuxt.config

Hi guys. This line of code doesn't work. How can i access asset frolder from nuxt.config?

export default defineNuxtConfig({
    app: {
      head: {
      link: [
        {
          key: 'preload-font-family-inter',
          rel: 'preload',
          href: '/assets/fonts/Inter.woff2',
          as: 'font',
          type: 'font/woff2'
        }
      ]
    }
  },
})

export default defineNuxtConfig({
    app: {
      head: {
      link: [
        {
          key: 'preload-font-family-inter',
          rel: 'preload',
          href: '/assets/fonts/Inter.woff2',
          as: 'font',
          type: 'font/woff2'
        }
      ]
    }
  },
})

1 replies

NNuxt

•Created by Wontolla on 5/3/2023 in #❓・help

vue-router custom regex with nuxti18n

Hi! How can i use ? Something like this. This doesn't work

defineI18nRoute({
  locales: ['it', 'en', 'de'],

  paths: {
    it: '/blog/:page(\\d+)',
    de: '/blog/:page(\\d+)',
    en: '/blog/:page(\\d+)'
  }
})

defineI18nRoute({
  locales: ['it', 'en', 'de'],

  paths: {
    it: '/blog/:page(\\d+)',
    de: '/blog/:page(\\d+)',
    en: '/blog/:page(\\d+)'
  }
})

1 replies

NNuxt

•Created by Wontolla on 4/24/2023 in #❓・help

Query Params and SSG strategy

Hi guys, I have a generated website (SSG) with a blog page and i use the ?query to manage pagination and category. Something like this en/blog?page=1&category1=XXX&category2=XXX The crawler to generate the pages doesn't work with query. What's the best thing to do in this scenario? I need to create an hook in nuxt.config to push all combinations of queries and generate the all the page for every page and category and category2 and languages? Why the crawler does not use queries? What is the reasoning behind it? How can i mange pagination and filtering for a generated website if i don't use the query?

1 replies

NNuxt

•Created by Wontolla on 3/1/2023 in #❓・help

i18n a blog with dynamicRouteParams

Hi! I'm creating a blog. I created a dynamic page [blog] .vue. At this point for each page I fetch the data with useAsyncData. So far everything is ok. However, I need that each article be associated with its corresponding language (with translated url). Here is the problem. At this point on the nuxt.config.ts I set

i18n: {
  dynamicRouteParams: true,
},

i18n: {
  dynamicRouteParams: true,
},

Ok, now as documentation (https://v8.i18n.nuxtjs.org/options/routing#dynamicrouteparams) inside [body].vue I have set

definePageMeta({
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
})

definePageMeta({
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
})

The problem is that definePageMeta is a compiler macro therefore, the page meta object cannot reference the component (or values defined on the component). (https://nuxt.com/docs/guide/directory-structure/pages/#page-metadata) This means that i cant change dinamically nuxtI18n object like this

const data= await useAsyncData(...)

definePageMeta({
  nuxtI18n: {
    en: { 
      blog: data.alternate_languages.en.url
    },
    fr: { 
      blog: data.alternate_languages.fr.url
    }
  }
})

const data= await useAsyncData(...)

definePageMeta({
  nuxtI18n: {
    en: { 
      blog: data.alternate_languages.en.url
    },
    fr: { 
      blog: data.alternate_languages.fr.url
    }
  }
})

At this point dynamicRouteParams:true is useless and i have no way to translate an article

1 replies

Gaming

Programming