Yamakasinge Posts - Answer Overflow

Yamakasinge

•Created by Yamakasinge on 7/19/2024 in #❓・help

When using isr routeRules, are server plugins still called each render ?

Hello, I have ISR route rules, and I was wondering if server plugins were executed when ISR is enabled for the route. If so, is there a way to force a server plugin anyway on each render ?

1 replies

NNuxt

•Created by Yamakasinge on 7/2/2023 in #❓・help

`refresh` method using `useLazyAsyncData` does nothing

Hello ! I am trying to refetch data on the client using the refresh method, however nothing happens :

const queryData = ref<RouterInput['users']['listUsers']>({
  orderBy: 'email',
  order: 'asc',
  limit: 10,
  filters: {
    email: '',
    first_name: '',
    last_name: '',
  },
})

const { data: users, refresh, pending, error } = await useLazyAsyncData(() => {
  console.log('refresh')
  const query = {
    ...queryData.value,
    filters: mapValues(queryData.value.filters, value => value || undefined),
  }

  return trpc.users.listUsers.query(query)
})

watchDebounced(queryData, async () => {
  console.log('refreshWatch')
  await refresh()
}, {
  debounce: 500,
  deep: true,
})

const queryData = ref<RouterInput['users']['listUsers']>({
  orderBy: 'email',
  order: 'asc',
  limit: 10,
  filters: {
    email: '',
    first_name: '',
    last_name: '',
  },
})

const { data: users, refresh, pending, error } = await useLazyAsyncData(() => {
  console.log('refresh')
  const query = {
    ...queryData.value,
    filters: mapValues(queryData.value.filters, value => value || undefined),
  }

  return trpc.users.listUsers.query(query)
})

watchDebounced(queryData, async () => {
  console.log('refreshWatch')
  await refresh()
}, {
  debounce: 500,
  deep: true,
})

On the console the log refreshWatch is printed, but refresh does not appear Is this the intended behavior ? Do you need a reproduction ? How could I solve this ? Thanks !

1 replies

NNuxt

•Created by Yamakasinge on 6/11/2023 in #❓・help

During a `useAsyncData(async () => {...})` can I return a 404 Not Found Error ?

When using a useAsyncData(async () => {...}) , is it possible to make nuxt redirect to the 404 error page ?

1 replies

NNuxt

•Created by Yamakasinge on 4/21/2023 in #❓・help

How to write a nuxt module compatible with Nuxt2 & Nuxt3 ?

I am trying to create a nuxt module that would be compatible with nuxt 2 & nuxt 3. The only thing the module does is to add a plugin How could I write that ? Is something like that allowed and a good idea ?

export default defineNuxtModule({
    // ...
    setup() {
        addPluginTemplate({
              getContents: "export default defineNuxtPlugin(() => console.log('foo'))",
        })
    }
})

export default defineNuxtModule({
    // ...
    setup() {
        addPluginTemplate({
              getContents: "export default defineNuxtPlugin(() => console.log('foo'))",
        })
    }
})

I am affraid that defineNuxtPlugin doesn't exists on Nuxt 2, will it work ?

1 replies

NNuxt

•Created by Yamakasinge on 4/19/2023 in #❓・help

How to auto import vuetify components in nuxt 3 ?

Hello, I'm trying to add auto import for vuetify components in my nuxt 3 project, however, I can't find a working solution. I've tried to add a modules/vuetify.ts file to my project with the following content :

import { resolve } from 'node:path'
import { readdir } from 'node:fs/promises'
import { addComponent, defineNuxtModule } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-module-vuetify',
  },
  async setup(_opts, _nuxt) {
    const componentPath = resolve(__dirname, '../../node_modules/vuetify/lib/components')
    const files = await readdir(componentPath, { withFileTypes: true })

    const componentsNames = files.filter(f => f.isDirectory()).filter(f => f.name.startsWith('V')).map(f => f.name)

    for (const name of componentsNames) {
      addComponent({
        name,
        export: name,
        filePath: `vuetify/components/${name}`,
      })
    }
  },
})

import { resolve } from 'node:path'
import { readdir } from 'node:fs/promises'
import { addComponent, defineNuxtModule } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-module-vuetify',
  },
  async setup(_opts, _nuxt) {
    const componentPath = resolve(__dirname, '../../node_modules/vuetify/lib/components')
    const files = await readdir(componentPath, { withFileTypes: true })

    const componentsNames = files.filter(f => f.isDirectory()).filter(f => f.name.startsWith('V')).map(f => f.name)

    for (const name of componentsNames) {
      addComponent({
        name,
        export: name,
        filePath: `vuetify/components/${name}`,
      })
    }
  },
})

It works well, however, on the server I get the following error :

[nuxt] [request error] [unhandled] [500] Unknown file extension ".css" for /home/leoc/Projects/eliah/website/node_modules/.pnpm/vuetify@3.1.15_vite-plugin-vuetify@1.0.2_vue@3.2.47/node_modules/vuetify/lib/components/VApp/VApp.css                 21:30:35
  at new NodeError (node:internal/errors:387:5)
  at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
  at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
  at defaultLoad (node:internal/modules/esm/load:81:20)
  at nextLoad (node:internal/modules/esm/loader:165:28)
  at ESMLoader.load (node:internal/modules/esm/loader:608:26)
  at ESMLoader.moduleProvider (node:internal/modules/esm/loader:464:22)
  at new ModuleJob (node:internal/modules/esm/module_job:63:26)
  at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:483:17)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:441:34)

[nuxt] [request error] [unhandled] [500] Unknown file extension ".css" for /home/leoc/Projects/eliah/website/node_modules/.pnpm/vuetify@3.1.15_vite-plugin-vuetify@1.0.2_vue@3.2.47/node_modules/vuetify/lib/components/VApp/VApp.css                 21:30:35
  at new NodeError (node:internal/errors:387:5)
  at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
  at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
  at defaultLoad (node:internal/modules/esm/load:81:20)
  at nextLoad (node:internal/modules/esm/loader:165:28)
  at ESMLoader.load (node:internal/modules/esm/loader:608:26)
  at ESMLoader.moduleProvider (node:internal/modules/esm/loader:464:22)
  at new ModuleJob (node:internal/modules/esm/module_job:63:26)
  at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:483:17)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:441:34)

Does anyone got this to work ? Thanks

3 replies

NNuxt

•Created by Yamakasinge on 2/28/2023 in #❓・help

Is it possible to disable server with nuxt test ?

By looking at the nuxt test documentation https://nuxt.com/docs/getting-started/testing , I understand that I can configure the command to disable the server. However, how do I set the option ? In nuxt.config.ts ? I want to avoid building nuxt server each time I want to test the server Thanks

1 replies

NNuxt

•Created by Yamakasinge on 2/27/2023 in #❓・help

How to update query params without performing a refresh ?

I try to keep in sync a field with query params :

<script setup lang="ts">
const route = useRoute()

const fieldValue = computed(() => route.query.field)

async function updateField(value: string) {
  const query = { ...route.query }
  query.field = value
  await navigateTo({
    path: '/current-path',
    query
  })
}
</script>

<template>
  <input type="text" :model-value="value" @update:model-value="updateField($event)" />
</template>

<script setup lang="ts">
const route = useRoute()

const fieldValue = computed(() => route.query.field)

async function updateField(value: string) {
  const query = { ...route.query }
  query.field = value
  await navigateTo({
    path: '/current-path',
    query
  })
}
</script>

<template>
  <input type="text" :model-value="value" @update:model-value="updateField($event)" />
</template>

However, each time the field is updated, I get a small spinner icon indicating the page is loading. This is not a great user experience. Is it possible to explicity say to ignore navigating, just update query params ?

2 replies

NNuxt

•Created by Yamakasinge on 2/22/2023 in #❓・help

Nuxt watch monorepo packages in dev

I have a pnpm monorepo with multiple package & Nuxt 3. When a package rebuild in development nuxt 3 won't reload nitro server, I have to restart manually the server. Is there a way to tell nuxt 3 to watch my packages ?

2 replies

NNuxt

•Created by Yamakasinge on 2/13/2023 in #❓・help

How to get project directory in nuxt kit ?

I want to create a nuxt module with nuxt kit that add a custom alias. But to do this I need to have the project dir :

nuxt.options.alias = Object.assign(nuxt.options.alias ?? {}, {
  mylib: resolve(projectDir, './node_modules/mylib')
})

nuxt.options.alias = Object.assign(nuxt.options.alias ?? {}, {
  mylib: resolve(projectDir, './node_modules/mylib')
})

How can I acheve such a thing ?

15 replies

NNuxt

•Created by Yamakasinge on 2/9/2023 in #❓・help

Is nuxt kit compatible with nuxt 2 & nuxt 3 ?

Hey ! I was wondering if it was possible to write a single module for nuxt 2 & nuxt 3 ? If yes do I have to be aware of some issues or incompatibilities ? Thanks !

3 replies

NNuxt

•Created by Yamakasinge on 2/2/2023 in #❓・help

How to Access pinia store inside a nuxt route middleware ?

Hello ! I'd like to redirect user based on current pinia state. Currently in the defineNuxtRouteMiddleware I only have access to to and from routes. How can I achieve what I want ?

2 replies

Gaming

Programming