localhostess Comments - Answer Overflow

localhostess

•Created by fibig on 7/18/2024 in #❓・help

Nuxt3 favicon

I just use an svg in my projects, so its scalable to any size nuxtConfig:

app: {
    head: {
        link: [
            { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }

app: {
    head: {
        link: [
            { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }

Put the image in the /public dir https://nuxt.com/docs/api/nuxt-config#head

4 replies

NNuxt

•Created by Ryän on 6/18/2024 in #❓・help

Tailwind CSS module unexpected style apply

i think its ok, its not part of the hmr workflow to add new pages alot

40 replies

NNuxt

•Created by Ryän on 6/18/2024 in #❓・help

Tailwind CSS module unexpected style apply

maybe its the new version of tailwind

40 replies

NNuxt

•Created by Ryän on 6/18/2024 in #❓・help

Tailwind CSS module unexpected style apply

@Ryän does it help if you add a tailwind config?

40 replies

NNuxt

•Created by Ryän on 6/18/2024 in #❓・help

Tailwind CSS module unexpected style apply

I see the issue too. If you add a new page it won't apply the style. Only to existing pages for some reason

40 replies

NNuxt

•Created by Ryn on 6/14/2024 in #❓・help

Auto Importing Issue

Thre’s two types - client: middleware method that runs before a pages navigation - https://nuxt.com/docs/guide/directory-structure/middleware - server: middleware method that runs before a server route - https://nuxt.com/docs/guide/directory-structure/server#server-middleware your first screenshot is for the server route, since it shows in your server folder your second doc link is for the pages route. what are you trying to do?

8 replies

NNuxt

•Created by zk1;* on 6/14/2024 in #❓・help

How can I pass more props in a nuxtlink or in a router in nuxt 3

I think he means you used to be able to do this, and now you can't

<nuxt-link :to="{ name: 'user', params: { userId: 123 }}">User</nuxt-link>

<nuxt-link :to="{ name: 'user', params: { userId: 123 }}">User</nuxt-link>

You don't always want query params added to the url

7 replies

NNuxt

•Created by Ryn on 6/14/2024 in #❓・help

Auto Importing Issue

Nuxt docs say to use https://nuxt.com/docs/guide/directory-structure/server#server-middleware

export default defineEventHandler((event) => {
  console.log('New request: ' + getRequestURL(event));
});

export default defineEventHandler((event) => {
  console.log('New request: ' + getRequestURL(event));
});

8 replies

NNuxt

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

How to create sticky table headers in a Nuxt UI Table Component?

5 replies

NNuxt

•Created by Tom on 6/10/2024 in #❓・help

Preventing Refetching in Component

Alex explains it here, pretty cool! https://www.youtube.com/watch?v=aQPR0xn-MMk

6 replies

NNuxt

•Created by Tom on 6/10/2024 in #❓・help

Preventing Refetching in Component

I had to use getCachedData like this in order to have it stop requesting from the api endpoint

const nuxtApp = useNuxtApp();
const {client} = usePrismic();

const {data: team} = await useAsyncData(
  'team',
  () => client.getSingle('team'),
  {
    transform: (team) => {
      const teamMembers = team.data.team_members || [];
      return teamMembers.slice(0, 2);
    },
    getCachedData: (key) =>
      nuxtApp.payload.data[key] || nuxtApp.static.data[key]
  }
);

const nuxtApp = useNuxtApp();
const {client} = usePrismic();

const {data: team} = await useAsyncData(
  'team',
  () => client.getSingle('team'),
  {
    transform: (team) => {
      const teamMembers = team.data.team_members || [];
      return teamMembers.slice(0, 2);
    },
    getCachedData: (key) =>
      nuxtApp.payload.data[key] || nuxtApp.static.data[key]
  }
);

6 replies

NNuxt

•Created by SpiKe. on 6/10/2024 in #❓・help

How to calculate scrollbar width before elements are visible ?

i do know that if you need the scrollbar not to affect the layout, look into the new css property scrollbar-gutter: stable

3 replies

NNuxt

•Created by Gregor on 6/10/2024 in #❓・help

nuxtpage: child page inside parent page

Without using a new layout, what worked for me was: pages/categories.vue:

<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <nuxt-link to="/categories/cat1">Cat1</nuxt-link>
      <nuxt-link to="/categories/cat2">Cat2</nuxt-link>
      <nuxt-link to="/categories/cat3">Cat3</nuxt-link>
    </div>
    <div>
      <NuxtPage />
    </div>
  </div>
</template>

<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <nuxt-link to="/categories/cat1">Cat1</nuxt-link>
      <nuxt-link to="/categories/cat2">Cat2</nuxt-link>
      <nuxt-link to="/categories/cat3">Cat3</nuxt-link>
    </div>
    <div>
      <NuxtPage />
    </div>
  </div>
</template>

pages/categories/index.vue:

<template>
  <div>Categories index content</div>
</template>

<template>
  <div>Categories index content</div>
</template>

pages/categories/[category].vue:

<script setup>
const {category} = useRoute().params;
</script>
<template>
  <div>Sub Assortment {{ category }}</div>
</template>

<script setup>
const {category} = useRoute().params;
</script>
<template>
  <div>Sub Assortment {{ category }}</div>
</template>

and no app.vue file

10 replies

NNuxt

•Created by localhostess on 6/2/2024 in #❓・help

Why does ssr/ssg client navigation change the page source?

Isn’t only the first request rendered server side (index), then subsequent navigation in-app is rendered like a SPA? thats why i’m wondering why the page source changed for /test. *** oh sorry, i get what is happening: right click -> view source opens a new browser tab which becomes a server request to the page: view-source:http://localhost:3000/test even if the original request was client side, opening that window is a server request so the js will show there.

4 replies

NNuxt

•Created by localhostess on 6/2/2024 in #❓・help

Why does ssr/ssg client navigation change the page source?

4 replies

NNuxt

•Created by localhostess on 5/23/2024 in #❓・help

Hydration mismatch for breakpoints

oooo ty.. will check this out!! 🙏

6 replies

NNuxt

•Created by localhostess on 5/23/2024 in #❓・help

Hydration mismatch for breakpoints

Thanks for the response! That would work in an individual component. Lets say in my nuxt layout.vue, i wanted to load various components for a mobile experience, or other ones for desktop. Before, in nuxt2 i would just setup the isMobile ref that gets the viewport width, and a resize listener to listen for viewport size to render one experience or the other. What would be the preferred way to handle this ya think?

6 replies

Gaming

Programming