Questions tagged [nuxtjs3]
Tag for questions related Nuxt3. More info can be found here: https://nuxt.com/
1,872
questions
88
votes
9
answers
215k
views
How to get route url params in a page in Nuxt2 and 3?
I am using Nuxt.js, and have a dymanic page which is defined under
pages/post/_slug.vue
So, when I visit the page url, say, http://localhost:3000/post/hello-world, how can I read this slug ...
- 4,130
32
votes
5
answers
38k
views
Nuxt 3 JWT authentication using $fetch and Pinia
I'm trying to do a JWT authentication to a distinct API.
As @nuxtjs/auth-next doesn't seem to be up to date and as I read it was possible to use the new global method fetch in Nuxt 3 instead of @...
- 843
25
votes
6
answers
17k
views
Cannot find module 'pinia/dist/pinia.mjs' when using run dev
I setup Pinia on top of fresh Nuxt3 app and start dev server, with exactly these commands in order:
npx nuxi init nuxt-app
cd nuxt-app
npm install
npm install @pinia/nuxt
npm run dev
Dev server runs ...
- 406
25
votes
7
answers
35k
views
How to set global API baseUrl used in useFetch in Nuxt 3
How do I set the baseUrl that is used in the useFetch composable globally (maybe nuxt.config.ts)?
How can I avoid defining it in every useFetch?
- 808
20
votes
2
answers
53k
views
exports is not defined in ES module scope
I created nest js project as following.
nest new project-name
and imported following from nuxt3 which is of type module of node js with mjs file extension (type definition of import doesn't require to ...
- 3,448
19
votes
1
answer
20k
views
How to add a script block to head in Nuxt 3?
I simply want to add a script block in the head tag.
Example
<script>
alert('hello, world!');
</script>
I spent hours to figure out a solution for something as simple as this.
There ...
- 34.3k
19
votes
3
answers
12k
views
How to add global interfaces to Nuxt project
I just started with Nuxt 3 and have been having some trouble with using typescript functionality.
I am trying to build a general NavBar that can have multiple buttons with different links. For this I ...
19
votes
2
answers
4k
views
How to subscribe to a specific action in Pinia
Does anyone know if it's possible to subscribe to a specific action in Pinia?
I know there's a way to subscribe to all actions like this:
const subscribe = someStore.$onAction(callback, false)
But ...
- 269
18
votes
2
answers
22k
views
Nuxt not automatically importing components from nested directory
In my nuxt app, components in nested directories are not automatically importing as expected. For some of my components i have something like the following:
vue 2.6.12, nuxt 2.15.0
components\ ...
- 4,593
18
votes
1
answer
11k
views
NuxtLink is updating route in nuxt 3 app, but not rendering contents
I am trying to use route using NuxtLink in a Nuxt 3 app, and it's changing the route, but it's not showing any contents. But, if I refresh or reload the updated route which was blank ago, then it's ...
- 779
17
votes
16
answers
9k
views
Nuxt 3 SSR: useFetch() returning null on page refresh
(After having edited my original question many times over, I have decided to completely rework it as to make it more clear and succinct. This is in accordance with StackOverflow recommendations.)
The ...
- 310
16
votes
1
answer
10k
views
Nuxt 3 - Pinia Vs useState()
Store (Pinia) Vs UseState
If I am not mistaken, useState can replace any store like Pinia? Given that useState makes ref sharable across all components I have a hard time knowing if I should use a ...
- 459
14
votes
4
answers
34k
views
"The Fetch API is an experimental feature. This feature could change at any time" while installing a Nuxt3 app
I try to creat new nuxt app using fallowing command
npx nuxi init my-app
successfully creating new app with Nuxt 3.0 stable inside but i get this annoying response
Nuxi 3.0.0-rc.10 ...
- 665
13
votes
3
answers
11k
views
How to use useQuery() for API route parameters in Nuxt 3?
I'm following a guide in which api routes are built like so:
1 create server/api/route.js file:
export default defineEventHandler((event) => {
return {
message: `hello api route`
}
...
- 4,845
13
votes
7
answers
24k
views
Nuxt3 Vite server port
I need to config server port for Nuxt3. I try to do it so:
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig(
vite: {
server: {
port: 5000,
},
}...
- 143
13
votes
4
answers
12k
views
How to configure eslint and prettier with nuxt 3?
I have installed these dependencies
Package.json:
{
"devDependencies": {
"@intlify/nuxt3": "^0.1.6",
"@nuxtjs/eslint-config": "^...
13
votes
1
answer
2k
views
Eslint with Nuxt3 auto-import
Seems very basic but I can't find anywhere an eslint setup that works with Nuxt3 auto-import, to avoid no-undef errors. I'm not using typescript.
I tried the following packages: @antfu/eslint-config, ...
- 8,549
12
votes
1
answer
14k
views
How to use SSR with Vue 3 - Vue packages version mismatch
I have a working Vue 2 app with server side rendering. Now I'm trying to upgrade to Vue 3 but stuck on the SSR part cuz the vue-server-renderer package throws the following error:
Vue packages version ...
- 517
12
votes
3
answers
25k
views
Client-only Nuxt 3 Vue plugin
I am new to Nuxt and Vue, so go easy on me. I am trying to create a video player component in my Nuxt 3 app using vue3-video-player, which doesn't seem to support SSR based on the following error I ...
- 487
12
votes
3
answers
17k
views
Nuxt 3: How to add default parameters and headers to $fetch
Trying to add any default parameters or headers (in this case a json web token as authentication header) to the $fetch composable so that i dont have to do
await $fetch('/api/example', {
headers: {
...
- 489
11
votes
2
answers
13k
views
I can't use dynamic components in Nuxt 3
I try to get this to work
<component v-if="!pending" :is="dynComponent" />
In Nuxt 2 it was no problem, but in Nuxt 3 (Vue 3 ?) it doesn't seem so easy.
The variable ...
- 258
11
votes
2
answers
15k
views
How to use global SASS variables in my Nuxt 3 components
Nuxt 3 first Release Candidate will be launched very soon, so I am starting a fresh new project with Nuxt 3. I am already facing an usual issue, and I was about to ask how to solve it. But I managed ...
- 1,811
11
votes
4
answers
2k
views
How to use SSR with Stencil in a Nuxt 3 Vite project?
In Nuxt 2 I could use server-side rendered Stencil components by leveraging the renderToString() method provided in the Stencil package in combination with a Nuxt hook, like this:
import { ...
- 598
10
votes
4
answers
7k
views
Cannot load Pinia in Nuxt3
I am trying to set up Nuxt3 to work with Pinia.
Steps Taken:
Started with an active nuxt3 project
ran npm install @pinia/nuxt
this failed, with a dependency error, so re-ran with npm install @pinia/...
- 1,194
10
votes
3
answers
9k
views
How do I make my Nuxt app (v3) serve .mjs.br (brotli) files instead of the regular .mjs files? (Text compression)
I deployed a simple Nuxt (version 3) app over Google Cloud Run and tested the performance using Lighthouse. The score was pretty horrible but one of the most impactful improvements it offered was to ...
- 500
10
votes
1
answer
31k
views
How to use template refs in Nuxt 3
In Nuxt2 there were template $refs that you could access in <script> with this.$refs
I would like to know what is the Nuxt3 equivalent of this is.
I need this to access the innerText of an ...
- 377
10
votes
2
answers
870
views
Why does <font-awesome-icon /> output whatever follows twice when using Nuxt v3 static generation?
I am using vue-fontawesome with Nuxt 3 as described here and I'm seeing this weird behaviour. Say I have something like this
<a href="https://example.com"><font-awesome-icon icon=&...
- 2,720
10
votes
1
answer
6k
views
Vue 3 / Nuxt 3 Scoped slot with generic data type inferred from props
I want to implement a carousel component in Nuxt v3. The component receives an array of items. The component only implements the logic, not the styling or structuring.
Here is my component now:
...
- 782
10
votes
2
answers
4k
views
How add composables provided by nuxt module to auto import?
I would like to add composables from my custom nuxt module and use them in components without import.
Now I have to use #import because without it I get an error (500 - useTest is not defined). I have ...
- 101
9
votes
3
answers
26k
views
Global Sass Import & Usage - Nuxt 3 Static Assets
I am trying to import a global Sass stylesheet from the /assets directory and use stuff like variables and mixins defined there throughout the components. My nuxt.config.ts looks like this currently:
...
- 715
9
votes
4
answers
14k
views
Nuxt3 + Pinia + VueUse -> useStorage() not working
Setup: I'm using Nuxt3 + Pinia + VueUse.
Goal:
I want to save a state of a pinia store to localstorage via VueUse: useStorage.
Problem:
For some reason no item is created in localstorage. I feel like ...
- 1,652
9
votes
2
answers
11k
views
Favicon loading from assets is not working in nuxt3
I am trying to load favicon from assets in nuxt 3 but it does not work except if I hardcode _nuxt in front of it. My config looks like this and this works:
export default defineNuxtConfig({
...
- 4,929
9
votes
2
answers
8k
views
Moving nuxt 3 to JavaScript from TypeScript
When getting started with nuxt 3, it creates TypeScript project by default.
Is there a way to move to JavaScript?
I have tried:
Rename nuxt.config.ts to nuxt.config.js
delete tsconfig.json
add ...
- 7,190
9
votes
2
answers
6k
views
Missing preload-helper export in vite package when building Nuxt 3 app
I'm creating an Nuxt 3 application and it works fine when i run npm run dev. Though when I want to build the app with npm run build I get this error:
[vite:resolve] Missing "./preload-helper"...
9
votes
1
answer
20k
views
Nuxt3 useAsyncData not working onMounted lifecycle hook
I'm still a bit confused on what I'm doing wrong here. Essentially I have a vue component in which I want to load some data in async after element is mounted.
I'm using NUXT 3 and composition API.
<...
- 497
8
votes
1
answer
4k
views
router-link-active Nuxt 3 / VueJS on nested routes not applying to parent
I have created a simple reproduction to better explain myself. I have:
-| pages/
---| test/
------| index.vue
------| nested.vue
And I have a navbar, having read the documentation I assume if I ...
- 1,562
8
votes
4
answers
18k
views
How do I set proxy in Nuxt3?
I try to start a nuxt3 program, now I want to set server proxy.
A request to http://localhost:3000/api/v1 is supposed to return a response from our backend server on http://39.98.58.238:8594 , but now ...
- 81
8
votes
5
answers
22k
views
How to add a page loader in Nuxt 3 application
I’m building an application using Nuxt 3, I want to add a page loader until the website loads.
- 137
8
votes
3
answers
14k
views
How to use nuxtjs/auth-next module with Nuxt3?
Just trying to add authentication to my NuxtJs 3 app folloging nuxt/auth configuration docs, but still get an error during app start:
// nuxt.config.js
export default defineNuxtConfig({
auth: {
...
- 2,516
8
votes
1
answer
4k
views
Why loading dynamically assets fails on Nuxt v3
I'm experience a weird situation,
I have a "standard" Nuxt v3 project that comes with vite
Works
<img src="~/assets/img/image.png">
<img src="~/assets/video/video.mp4&...
- 19.7k
8
votes
3
answers
11k
views
Why useFetch is not working on page change in nuxt3 on client side?
I just started learning nuxtjs (have some experience in vue.js) and I stuck into the following problem:
I have a simple todo-[id].vue page. It should get an todo from the API and render on the page:
&...
- 1,224
8
votes
9
answers
11k
views
Error while creating nuxt3 project. Failed to download template from registry
When I use this command to create a new Nuxt 3 project:
npx nuxi init nuxt-app
It outputs this error:
ERROR (node:1752) ExperimentalWarning: The Fetch API is an experimental feature. This feature ...
- 111
8
votes
2
answers
9k
views
Why do I get this hydration warning when using useState in Nuxt 3?
MRE: https://github.com/Morpheu5/nuxt3-hydration-mre (was https://box.morpheu5.net/s/H6WXBfCebrRyTa8)
According to the docs, useState in NuxtJS 3 is supposed to be the SSR-friendly lightweight way of ...
- 2,720
8
votes
2
answers
5k
views
error while deploying nuxt 3 in pre-rendered mode
Hi I'm trying to build my nuxt 3 app in pre-rendered mode (SSG mode), and I have add these configs in my nuxt.config.ts file
// https://nuxt.com/docs/api/configuration/nuxt-config
export default ...
- 581
8
votes
2
answers
8k
views
How to import composables into server/api in Nuxt 3
I just unified a useSupabase composable to remove duplicate code and to have access to the supabase context.
But I get an error when I import the composable into the server/api folder:
message "...
- 4,142
8
votes
3
answers
2k
views
Apollo Client "Named export 'remove' not found"
I'm attempting to create an apollo client plugin for a Nuxt 3 application. It's currently throwing an error regarding a package called ts-invariant:
file:///Users/[my name]/Repositories/[project]/...
- 408
8
votes
1
answer
4k
views
Nuxt 3 - onServerPrefetch Lifecycle injection APIs
[Vue warn]: onServerPrefetch is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async ...
- 2,882
8
votes
2
answers
679
views
+50
Layout not updating after navigation in Nuxt 3 middleware with separate login layout
I'm facing an issue in Nuxt 3 where the layout does not update correctly after navigation in a middleware, especially when using separate layouts for the login page and other pages. Here's an overview ...
- 119
8
votes
2
answers
5k
views
Nuxt 3 Authentication with Laravel 9 and Sanctum
I'm using nuxt 3 for a project and can't find an easy way to do authentication with Laravel and Sanctum.
The @nuxtjs/axios module is only compatible for nuxt 2 and the package a developer provided for ...
- 137
8
votes
0
answers
1k
views
How to cofigure HMR with nuxt 3 + vite on Gitpod web (behind proxy)
I'm new to nuxt and having trouble getting HMR websocket connection configured on a nuxt project and running in Gitpod. The project uses nuxt 3 + vite.
After running yarn dev the dev server is running ...
- 405