Questions tagged [nuxt3]
The nuxt3 tag has no usage guidance.
875
questions
14
votes
5
answers
12k
views
Cannot find name 'defineNuxtConfig'.ts(2304)
I tried to install Nuxt 3 layers inside a monorepo with turborepo. and I somehow get error with typescript where it's seems to not able to figure out nuxt
defineNuxtConfig not find
appConfig not found
...
- 143
10
votes
7
answers
19k
views
How to watch route in Nuxt 3?
I can't figure out how to watch routes in Nuxt3.
In Nuxt2 was very easy to make it in any component. Did anyone knows how can i write this in Nuxt3?
<script>
export default {
....
watch: {
...
9
votes
2
answers
3k
views
How to use auto-import on interface or type? [nuxt 3]
I have some types that i want to be auto imported in my nuxt 3 app, but every time i try exporting a ts file containing the types it somehow skips or ignorers the types.
I found a way for them to ...
- 91
8
votes
1
answer
962
views
Nuxt 3 SSR - No console logs of server API in dev environment
When you do a simple console log in server API side, it doesn't show up when you build it using pnpm run dev.
But if you build it using pnpm run build and run the index.mjs, the console log will show ...
- 143
7
votes
1
answer
6k
views
What is the proper way to include chart.js with Nuxt 3.4?
There are some tutorials out there (e.g. https://medium.com/geekculture/chart-js-in-nuxt-js-how-to-implement-c255a2657b02) that show how to integrate Chart.js with an earlier version of Nuxt 3 or even ...
- 1,106
6
votes
2
answers
5k
views
How to use Socket.IO with NUXT 3?
I'd like to use Socket.IO with my Nuxt 3 app, so that the Nuxt app and the Socket.IO server share the same port and the Socket.IO server automatically starts as soon as the Nuxt app is ready.
I've ...
- 151
5
votes
1
answer
2k
views
Nuxt 3 + Vite fails to build because of fsevents.node
After updating Nuxt to 3.4.2 and types/node to 18.15.13 I get the following error when trying to build:
npm run dev:
✘ [ERROR] No loader is configured for ".node" files: node_modules/...
4
votes
4
answers
6k
views
Nuxt 3 useNuxtApp() returns type unknown
I try to provide a helper to be usable across all composables and application in Nuxt plugin, and the code looks like this:
// hello.ts
export default defineNuxtPlugin(async nuxtApp => {
nuxtApp....
- 81
4
votes
1
answer
4k
views
Is there any way to set meta tags dynamically in nuxt 3?
I'm trying to populate page title and meta tags with dynamic data coming from api for seo purpose. but unable to get it in view-page-source
I've tried useHead, useSeoMeta and useServerSeoMeta with ...
- 41
4
votes
1
answer
6k
views
Failed to fetch dynamically imported module in nuxt3
I am learning nuxt3, I have been stuck on this problem, and I have gone through some posts regarding to this error but all solutions do not work for me.
I am developing a nuxt3 app, with vuetify, ...
- 792
4
votes
1
answer
14k
views
NUXT 3 fetching data on the client side
For example we have the posta api which can return posts (get) and create new ones (post).
First i am need to get them on the server side.
I am do that on the asyncData option like that.
I am use ...
4
votes
1
answer
2k
views
How to use subdomain in Nuxt 3
is it possible to somehow work with subdomain in Nuxt 3?
So that instead of such a link:
https://example.com/projects/19302847
I could use one like this:
https://19302847.example.com
4
votes
2
answers
7k
views
Nuxt 3 and Vuetify 3: Failed to resolve component: *
I wanted to look at Nuxt 3 with Vuetify 3 and unfortunately I get the following error message during setup:
[Vue warn]: Failed to resolve component: v-btn ...
- 85
4
votes
1
answer
924
views
Retry failed requests with useFetch composable in NUXT 3
I'm trying to use usefetch for making API calls in NUXT 3 app. I've 2 additional requirements:
Add Authorization header with each request - I've got a solution to this by defining custom composable ...
- 323
4
votes
2
answers
564
views
Can you invalidate SWR/static routes depending on user actions using Hybrid Rendering in Nuxt 3?
Let's say we have following pages:
/profile-edit: A private page, where the user can edit his profile let's call him "Sam James".
/profile/sam-james: A publicy available profile page (like ...
- 3,403
3
votes
1
answer
4k
views
VSCode Auto-Import doesn't work: Cannot find name
I have just upgraded Nuxt 3.1 to 3.2...
How to make it work properly? (starting server can be successful)
- 485
3
votes
4
answers
7k
views
Redefine $fetch in nuxt3 with global onRequest handler
Is it possible to use global onRequest handler to $fetch with Nuxt3, to add specific data on each request?
With nuxt2 and axios it was simple
/plugins/axios.js
export default function ({ $axios, ...
- 275
3
votes
2
answers
4k
views
Custom Auto Imports in Nuxt 3 (Auto Import Pinia Store)
Is there a way to set custom auto imports in Nuxt 3? I use Pinia and my stores are in the root directory under /stores.
For example, if I want to use the store from /stores/auth.store.ts in a ...
- 137
3
votes
4
answers
1k
views
WARN [nuxt] Two component files resolving
WARN [nuxt] Two component files resolving to the same name ProseCode:
./node_modules/@nuxtjs/mdc/dist/runtime/components/prose/ProseCode.vue
./node_modules/@nuxt/content/dist/runtime/components/...
- 33
3
votes
1
answer
3k
views
How to access the response headers with Nuxt 3's useFetch?
I am migrating a Nuxt2 that uses Axios to a Nuxt3 App that uses useFetch.
This following code accesse the response's header:
$axios.get(url, { responseType: 'arraybuffer' }).then((response) => {
...
- 4,088
3
votes
2
answers
689
views
How to create highlightjs plugin on nuxt3
I try to create a plugin in nuxt3 that uses highligh.js and use it on my components. But I can't do it
I make this :
// @/plugins/highlight.js
import 'highlight.js/styles/stackoverflow-light.css'
...
- 107
3
votes
2
answers
5k
views
Nuxt 3 and Vue 3 onMounted call function useFetch function not getting data form APIs
Hi i am new in Nuxt and Vue. I am using Nuxt framework to get data form APIs. I want to get data from APIs when onMounted method call.
I created saprate function to call api. That api get data with ...
- 65
3
votes
1
answer
2k
views
Adding local JS files to Nuxt 3
I'm trying to add some local js files available in my assets/js folder, but to no success.
The error I get is: http://localhost:3001/assets/js/app.js net::ERR_ABORTED 404 (Page not found: /assets/js/...
- 676
3
votes
3
answers
8k
views
Nuxt3 "await navigateTo ('/some-path')" not work first time call inside "defineNuxtRouteMiddleware", but working well at least a declare from outside
export default defineNuxtRouteMiddleware(async(to, from) => {
const loggedIn = useState('loggedIn', () => false)
if(loggedIn.value == false) {
if(to.path == '/auth/login') {
...
- 71
3
votes
1
answer
227
views
Where can arbitrary code be placed in Nuxt 3?
I'm facing confusion due to the different purposes of numerous folders in Nuxt 3. I want to store a simple food list array in a JavaScript file and export it, but I'm uncertain about the appropriate ...
- 4,372
3
votes
3
answers
5k
views
Nuxt 3 composables suddenly undefined
I set up a composable for the currentYear under composables/getCurrentYear.ts
export const getCurrentYear = () => {
return new Date().getFullYear();
}
in my Footer component I defined it as
&...
- 117
3
votes
1
answer
399
views
How to Upload Files to the server and store in inside the public folder of Nuxt? Not working in production
I am trying to upload files using an API and then store them inside the public folder of Nuxt.
This code works but is not in production.
~/server/api/upload.post.ts
import path from 'path'
import ...
- 1,784
3
votes
1
answer
378
views
Turn all SASS code into CSS in Nuxt project
I have a project where part of the code is written in SASS. I want to get rid of SASS and work with vanilla CSS, so I'm trying to find a programatic way to turn all my SASS parts into CSS, or at least ...
- 1,159
3
votes
1
answer
683
views
How to properly wrap `useFetch` to access reactivity?
I am wrapping useFetch() as a composable to provide a custom baseURL and to automatically set an authentication token, but when I call the composable within a component without the await keyword it ...
- 6,819
3
votes
1
answer
495
views
How to run Nuxt3 with docker (docker compose)
I want to run nuxt3 in a Docker container (using docker compose)
My Dockerfile looks like that:
FROM node:18.17.1-bullseye as build-stage
WORKDIR /app
COPY . .
RUN yarn install
RUN yarn build
FROM ...
- 911
3
votes
2
answers
2k
views
How to configure or disable Content Security Policy(CSP) in Nuxt 3 to render images?
I'm tryin to render some images from a specific URL in Nuxt, but i'm getting the following error:
Refused to load the image because it violates the following Content Security Policy directive: "...
3
votes
0
answers
434
views
How to resolve the 'WARN Sourcemap for 'plugin-vuetify:components' warning
I added the following section to nuxt.config.ts, referring to this page:
https://vuetifyjs.com/en/features/treeshaking/
hooks: {
'vite:extendConfig': (config) => {
config.plugins!.push(
...
- 187
3
votes
1
answer
190
views
Nuxt Middleware | httpOnly Cookie after page reload gone
Hello i want to save a JWT token in an HttpOnly cookie. The token is received from a django backend after successful login.
Everything works fine until i add the HttpOnly flag in the pinia store.
How ...
- 54
3
votes
0
answers
1k
views
How to add assets into the public folder in Nuxt 3 inside a module
I've been using Nuxt 3 since its first release candidate and I really like it! I recently started creating modules for the framework and I've reached a roadblock
For a bit more context, I'm building a ...
- 112
3
votes
0
answers
453
views
Nuxt3 env vars are empty in production when injected with Docker
I was using environment variables with a PaaS (render.com) and it worked as expected. I decided to self host my sebsite and use Docker instead, but now, my variables are empty. Here is what I did:
*
...
- 10.9k
3
votes
0
answers
559
views
NUXT 3.5.1 using generic type in setup script tag raises an error " Unresolvable type reference or unsupported built-in utility type""
I made an application using NUXT 3.5.1 but when I am trying to use the Vuejs 3.3 new feature generic in the setup script it raises an error :
<script lang="ts" setup generic="T"&...
- 607
3
votes
0
answers
337
views
Nuxt server route works locally, but not on remote Vercel Edge server: 404 Status Code -- why?
I have a Nuxt3 app using server routes. The app works fine locally. However, after deployment to Vercel using vercel-edge preset, one of the routes for some reason is a 404.
When accessing this URL: ...
- 5,059
3
votes
0
answers
662
views
NUXT 3 - SSR - Cloudflare (Cache)
I have a specific question about NUXT 3 and the possibilities for our solution.
NUXT 3 (SSR Enabled)
We have created an E-commerce webshop. The pages and categories are generated dynamically. That is, ...
- 421
3
votes
0
answers
637
views
'SyntaxError: Need to install with `app.use` function' when using Vuetify v-locale-provider component
I'm using Nuxt 3 with Vuetify 3 to build my application, and I'm trying to use the v-locale-provider component to force RTL direction for a specific part of the component.
<v-locale-provider rtl>...
- 73
3
votes
5
answers
4k
views
Nuxt 3 useHead: how to replace body class instead of adding to it?
I'm working on a Nuxt 3 project, and I want to replace the body class on route change using the useHead hook. Specifically, I want to use useFetch to load data for the current page, and once that data ...
3
votes
0
answers
757
views
Nuxt 3 - code change in composable generates ReferenceError
Introduction
I am using nuxt for some small university projects, but I mention something that is quite anoying, but I could not find any ticket on the Nuxt 3 github or any mention on stackoverflow.
...
- 401
3
votes
0
answers
373
views
Nuxt3: `useRequestEvent()` return undefined in server plugin
I want to access header.node.req._parsedUrl but it's return undefined. Anyone know what's the solution.
Here's the code
// plugins/init.server.ts
export default defineNuxtPlugin((nuxtApp) => {
...
- 702
3
votes
1
answer
603
views
How to get a Cookie from a composable in Nuxt 3?
I'm trying to access an auth token stored inside a cookie or localStorage from a composable.
// composables/useUser.ts
export const useUser = () => {
const info = async () => {
const ...
- 48
2
votes
2
answers
2k
views
How to implement (laravel echo/pusher) with Nuxt 3
I need to display real time notifications in my Nuxt 3 app.
Backend developer uses (Laravel Echo and pusher).
I'm looking for helper libraries but all results only support Nuxt 2.
Any help please..?
I ...
- 35
2
votes
3
answers
7k
views
Nuxt3 : [nuxt] [request error] [unhandled] [500] fetch failed (http://localhost:3000/__nuxt_vite_node__/manifest)
What does this error mean?
I have done no changes to my Code. When I build my app it works but on dev, it show me this error: npm run dev
I tried to rebuild the app, deleted all node_modules, and ...
- 31
2
votes
2
answers
1k
views
How to make Nuxt 3 correctly build SSG pages + dynamic API routes?
I'm building a site which uses only a combination of statically generated pages and JSON API routes, with no runtime SSR of templates. I would like Nuxt to build it accordingly:
Routes under /api ...
- 1,102
2
votes
1
answer
1k
views
Vue3-easy-data-table installation for nuxt 3
I'm trying to install vue3-easy-data-table for my nuxt 3 project. However the documentation doesn't really have a guide on nuxt 3 installation. Does anyone know how to install it? The following steps ...
- 122
2
votes
1
answer
439
views
Remove stack field from Nuxt createError response
I made server API for validate some data on Nuxt like this :
export default defineEventHandler(async (event) => {
const body = await readBody(event);
const result = schema.safeParse(body);
...
- 750
2
votes
2
answers
2k
views
Vite dev proxy not proxying
I have a nuxt3 web app. For dev purposes I want to proxy requests from "/whatever" to "localhost:3033".
I tried doing that via the vite server options as described in their docs (...
- 170
2
votes
2
answers
3k
views
How to change request headers with server middleware
According to server directory documentation of Nuxt 3, server middleware can be used to change request headers. I want to add an authorization header and attach a bearer token to my requests via ...
