IamSebastn Posts - Answer Overflow

IamSebastn

•Created by IamSebastn on 9/8/2024 in #❓・help

Nuxt-Layout is Slow when rendering?

Hey Nuxt-Experts! I have the following problem, my client is a local bar which wants to make his menu digital. So far so good. Die the fact, that the menu has a different layout then the other pages of the project I‘m using Nuxt-Layouts.. Unfortunately I‘m experience a big drawback in puncto speed. If I‘m using layout the initial pageload of each menu-page is about 200-300ms. Yes, I‘m also retrieving some data from Prismic.IO but right now I‘m using only a quarter of the data and the page-speed is this long. Is this a common thing, when using Nuxt-Layouts? I also thought about adding another app.vue to the menu-page folder, but idk if it‘s a good practice.. How would you solve this issue? —- Current folder structure: /layouts […] /pages |- index.vue |- /menu |- index.vue |- drinks.vue |- food.vue app.vue nuxt.config.ts […]

5 replies

NNuxt

•Created by IamSebastn on 6/13/2024 in #❓・help

Nuxt/Font with Variable typeface

Does somebody know, how to use a local variable typeface with the Nuxt/Font module? Right now my config looks like this:

[…]
fonts: {
      assets: {
         prefix: 'public/fonts/',
      },
      families: [
         {
            name: 'Geist Sans',
            provider: 'local',
            weight: [100, 900],
            preload: true,
            display: 'swap',
            fallbacks: ['Arial', 'Helvatica'],
         },
      ],
   },

[…]
fonts: {
      assets: {
         prefix: 'public/fonts/',
      },
      families: [
         {
            name: 'Geist Sans',
            provider: 'local',
            weight: [100, 900],
            preload: true,
            display: 'swap',
            fallbacks: ['Arial', 'Helvatica'],
         },
      ],
   },

But any font-weight I‘m using within my css don’t work.. right now I‘m kinda frustrated haha. Hopefully somebody could give me an answer

1 replies

NNuxt

•Created by IamSebastn on 6/5/2024 in #❓・help

Avoiding style-mismatch

My goal is to position a component randomly inside a grid. But unfortunately I‘m always getting the style-mismatch warning:

- rendered on server: style="grid-column:12;"
  - expected on client: style="grid-column: 10"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch.

- rendered on server: style="grid-column:12;"
  - expected on client: style="grid-column: 10"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch.

I try to achieve my goal with the following code:

js 
const computedStyle = computed(() => {
   const letters = '0123456789ABCDEF'
   let color = '#'
   for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)]
   }
   const style = `background: ${color}; grid-column: ${useRandomnumber(0, 12, 1)} / span 3`

   return style
})

<template>
   <div class="box" ref="item" :style="computedStyle"></div>
</template>

js 
const computedStyle = computed(() => {
   const letters = '0123456789ABCDEF'
   let color = '#'
   for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)]
   }
   const style = `background: ${color}; grid-column: ${useRandomnumber(0, 12, 1)} / span 3`

   return style
})

<template>
   <div class="box" ref="item" :style="computedStyle"></div>
</template>

I thought that due the style prop is a template literal it would be the easiest to outsource the logic into a computable variable and pass it as a prob. But unfortunately this doesn‘t work.. Hope someone can tell me how to tackle this issue

4 replies

NNuxt

•Created by IamSebastn on 3/24/2024 in #❓・help

Delete Tailwind from Nuxt-Project

5 replies

NNuxt

•Created by IamSebastn on 3/1/2024 in #❓・help

Intercepting Routes

Hey dear NuxtCommunity! although I have experiences in React, I‘m pretty new to vue/nuxt. For a project of mine, I wanted to display a modal with it‘s own route (e.g localhost:3000/modal). Does someone already created so called intercepting routes and/or knows how to do it? Thanks at all in advance 🫶🏼

3 replies

Gaming

Programming