Questions tagged [nuxt.js]
Nuxt.js is a framework for creating Vue.js applications, you can choose between Universal, Static Generated or Single Page application (inspired by Next.js)
12,544
questions
564
votes
49
answers
676k
views
Why does Prettier not format code in VS Code?
In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code.
When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does ...
- 20.8k
134
votes
4
answers
268k
views
Why is 'type: module' in package.json file?
I upgraded the node and built the existing file.
But it didn't build, and there was an error.
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: │
│ ~~/nuxt....
- 1,607
98
votes
10
answers
36k
views
Nuxtjs vuetify throwing lots of `Using / for division is deprecated and will be removed in Dart Sass 2.0.0.`
Nuxtjs using vuetify throwing lots of error Using / for division is deprecated and will be removed in Dart Sass 2.0.0. during yarn dev
Nuxtjs: v2.15.6
@nuxtjs/vuetify": "1.11.3",
"...
- 983
90
votes
21
answers
95k
views
Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
I am using Nuxt.js / Vuejs for my app, and I keep facing this error in different places:
The client-side rendered virtual DOM tree is not matching server-rendered content.
This is likely caused ...
- 3,810
85
votes
9
answers
199k
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 ...
- 3,810
79
votes
11
answers
162k
views
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /app/node_modules/@babel/helper-compilation-targets/package.json
I'm having trouble building my nuxt images in a travis CI pipeline. My local environment is ubuntu 18.04 - docker version 19.03.11 docker-compose version 1.24.1 I'm able to build and run my images ...
- 1,300
77
votes
5
answers
37k
views
Difference between Asyncdata vs Fetch
What is the exact difference between fetch and async data. The official documentation says the following:
asyncData
You may want to fetch data and render it on the server-side. Nuxt.js
adds an ...
- 1,142
66
votes
6
answers
128k
views
How to get current route name in Nuxt 2 and 3?
I'm using Nuxt.js for building a static website.
How to access in component's script code currently displayed route name (I would like to avoid reading direct url from browser location)?
Can I ...
- 5,820
63
votes
6
answers
102k
views
potentially fixable with the `--fix` option
I am creating a app with nuxt.js but everytime I launch the app, gives me the error of eslint and saying "potentially fixable with the --fix option."
I did the command npm run lint -- --fix and it ...
- 947
62
votes
9
answers
106k
views
“window is not defined” in Nuxt.js
I get an error porting from Vue.js to Nuxt.js.
I am trying to use vue-session in node_modules. It compiles successfully, but in the browser I see the error:
ReferenceError window is not defined
...
- 777
60
votes
8
answers
65k
views
How to solve "semi-colon expected" warnings (css-semicolonexpected)
I'm trying to use Tailwindcss @apply directive in a <style> tag of a Nuxt.js Vue file. Everything works fine, but I keep getting some annoying red squiggly lines. Please, guys, I need help... ...
- 611
55
votes
1
answer
30k
views
nuxt build --spa vs nuxt generate
What is the difference between
nuxt build
vs
nuxt generate
vs
nuxt build --spa
I am trying to compile three different variations:
1. regular nuxt with ssr
2. prerendered spa
3. spa without ...
- 13.2k
53
votes
3
answers
33k
views
How to set lang attribute on html element with Nuxt?
Using the file nuxt.config.js file, head contents can be customized to add some meta, or other things:
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'awesome title',
...
- 15.4k
48
votes
4
answers
29k
views
Vue.js: Nuxt error handling
Struggling a bit to set up error handling with vuex. There seems to be quite a few ways to do so and little documentation on proper error handling. I've been experimenting with four alternatives, ...
- 4,581
47
votes
1
answer
26k
views
Where to store common component methods in #NUXT.JS
Actually i want to know where to store common components methods in #NUXT.JS.
things which i have tried.
--> Storing common code in middleware (its use-less) because according to my knowledge ...
- 541
45
votes
6
answers
14k
views
Nuxt js - Fresh install of nuxt 2.14.6 contains babel "loose option" warnings
I have a fresh install of nuxt version 2.14.6 and I would like to silence an error I get when I run the nuxt command:
WARN Though the "loose" option was set to "false" in your @...
- 644
44
votes
2
answers
25k
views
NUXT- assets and static folder - when to use which?
Being new to NUXT, I am a bit confused about the difference between the assets and static folders.
in the documentation regarding this folders it says:
every file below 1 KB will be inlined as ...
- 4,833
43
votes
9
answers
31k
views
capacitor.settings.gradle' as it does not exist
I am new to Ionic while build the app in android. Its opening a project in Android Studio but while gradle sync its showing the following error
Could not read script 'F:\IonicProjects\mis-tracking-...
- 531
43
votes
7
answers
49k
views
How to run NUXT (npm run dev) with HTTPS in localhost?
EDIT: Updated the text in general to keep it shorter and more concise.
I am trying to configure HTTPS when I run npm run dev so I can test MediaStream and alike locally (for which browsers require me ...
- 5,700
43
votes
10
answers
117k
views
Vuex - Do not mutate vuex store state outside mutation handlers
Why do I get this error:
Error [vuex] Do not mutate vuex store state outside mutation handlers.
What does it mean?
It happens when I try to type in the edit input file.
pages/todos/index.vue
<...
- 55.1k
42
votes
9
answers
23k
views
Nuxt.js Cannot find module '@babel/preset-env/lib/utils'
I'm getting this error when trying to run yarn run dev --port=4000
Here is the error:
Module build failed (from ./node_modules/babel-loader/lib/index.js): ...
- 980
41
votes
5
answers
47k
views
How to format Vuetify data table date column?
I have a simple data table using Vuetify data table. One of the column is a createdOn (date time), I want to format it. How can I do it ?
This is what i get now:
<template>
<v-layout>
...
- 959
40
votes
11
answers
62k
views
How to disable vue/multi-word-component-names eslint rule for just one .vue file?
I am using the Vue ESLint plugin and it has a rule for not allowing single word component names.
However, I am also using Nuxt, and to set a default Layout in Nuxt you need a .vue component named ...
- 1,174
37
votes
6
answers
22k
views
jsconfig.json gives ts errors
I am having jsconfig.json in my root directory using Nuxt.js project.
And I am having an error:
File '/home/mike/Documents/nuxt/node_modules/dotenv/types' not found.
The file is in the program ...
- 637
36
votes
5
answers
24k
views
setup Google Analytics 4 in nuxt.js
I'm having issues setting up a new Google Analytics 4 (GA4) account with Nuxt. Everything seems configured ok based on tutorials, however my traffic doesn't show up in GA (dev & production)
In ...
- 642
36
votes
1
answer
18k
views
Improve Nuxt TTFB
I'm building a large application using Nuxt and Vuetify, everything is good and working fine but unfortunately the score from Lighthouse is not the best with only 42 in performance.
I already improved ...
- 3,316
35
votes
2
answers
33k
views
How to access to the vue store in the asyncData function of nuxt
in a component i want to acces to the store with the asyncData function like so :
asyncData({ app, params }) {
var url = `https://myapi/news/${app.$store.state.market}/detail/${params.id}`;
return ...
- 1,723
33
votes
9
answers
79k
views
Error in running nuxt project: "'nuxt' is not recognized as an internal or external command"
When I tried to run npm run dev in my nuxt project, my console returned this message:
'nuxt' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ...
- 1,263
32
votes
9
answers
19k
views
[Vue warn]: Unknown custom element: <nuxt-link> - When running jest unit tests
Problem
I'm using nuxt 1.4 with routing using Jest to do unit testing. My application doesn't throw errors and seems to work perfectly. However when running my unit test npm run unit (which runs jest) ...
- 3,431
32
votes
1
answer
48k
views
Custom elements in iteration require 'v-bind:key' directives
In my Nuxt app I have the following line that triggers the error mentioned in the title of this question:
<template v-for="(project, index) in existingProjects">
<span :key="project....
- 4,005
31
votes
4
answers
25k
views
Cloud Run: "Failed to start and then listen on the port defined by the PORT environment variable." When I use 8080
I got this error message when I try to run my container in Google Cloud Run.
type: Ready
status: 'False'
reason: HealthCheckContainerError
message: |-
Cloud Run error: Container failed to start. ...
- 458
31
votes
11
answers
78k
views
"document is not defined" in Nuxt.js
I am trying to use Choices.js within a Vue component. The component compiles successfully, but then an error is triggered:
[vue-router] Failed to resolve async component default:
ReferenceError: ...
- 14.4k
31
votes
3
answers
47k
views
How to submit a form in Vue, redirect to a new route and pass the parameters?
I am using Nuxt and Vue and I am trying to submit a form, redirect the user to a new route including the submitted params, send an API request to get some data and then render that data.
I achieved ...
- 6,093
31
votes
3
answers
2k
views
Apollo is not assignable to parameter of type 'VueClass<Vue>
Iam building a 'Nuxt.js' app with typescript.
This is my code:
<script lang='ts'>
import {Component, Vue} from 'nuxt-property-decorator';
import {LOCATION} from '~/constants/graphql/...
- 356
28
votes
7
answers
54k
views
How to use .env variables in Nuxt 2 or 3?
I have .env file in the project root, and in my nuxt config I am using variables to configure ReCaptcha like this:
import dotenv from 'dotenv'
dotenv.config()
export default {
modules: [
[...
- 4,663
28
votes
3
answers
19k
views
Configure nuxt.js application to work in a subdirectory on a webserver
I want to deploy a static nuxt.js application (built with nuxt generate) to a subdirectory of a webserver. nuxt places the generated files in the dist directory by default:
If I start a webserver on ...
- 12.7k
27
votes
3
answers
30k
views
VueJS: variable is undefined inside computed only
I'm trying to make async autocomplete input with Vue, Nuxt, Axios and Buefy. It basically works, but I need to have different strings when user just starts typing and there's yet nothing to show, and ...
- 892
26
votes
8
answers
54k
views
How to get axios baseUrl in nuxt?
I have axios module in my Nuxt.js project.
I also set up my baseUrl (for API) in localhost:4040/api while my client is running on port 3000.
When I fetch image data in the API, it returns a relative ...
- 1,975
26
votes
8
answers
65k
views
Copy url to clipboard via button click in a vuejs component
I have following component, and I would like to have a button that copies the link_url to the clipboard on click.
I have javascript code that works when selecting an id, however the links do not have ...
- 10.8k
25
votes
6
answers
35k
views
Vuetify - How to trigger method when clear a v-text-field
is there a way to call a method while clearing a text-field with Vuetify?
<v-text-field
class="mt-2 mb-0"
clearable
solo
v-model="searchQuery"
append-icon="search"
@click:...
- 353
25
votes
2
answers
79k
views
How to set data into nuxt.js nuxt-link?
I'm trying to pass data into nuxt-link but nuxt-link is just returning a 404 error when I click on the link. It doesn't seem to be getting and loading the file....
The second 2 links that use :href ...
- 10k
25
votes
2
answers
13k
views
What's the real difference between target: 'static' and target: 'server' in Nuxt 2.14 universal mode?
in the latest version of Nuxt (2.14) they introduced an optimization for building the app when no code is changed (for drastically improve build times).
I make websites in jamstack, deploy on netlify ...
- 804
24
votes
3
answers
34k
views
How to listen to scroll events in vue nuxtjs?
I've search for a solution and came up with this code
methods: {
handleScroll () {
console.log(window.scrollY)
}
},
created () {
window.addEventListener('scroll', this.handleScroll);
},
...
- 5,534
24
votes
10
answers
20k
views
Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible
i'm trying to install Tailwindcss in my nuxt project
I use fresh install from nuxt https://v3.nuxtjs.org/getting-started/installation
npx nuxi init nuxt3-app
and follow tailwindcss installation
https:...
- 243
24
votes
2
answers
34k
views
Pass custom data to `$router.push()` in vue-router
Is there a way to pass additional data to $router.push() that is not registered as param or query in the route's path. This will allow me to recognize on the next page that it has been accessed via ...
- 1,924
24
votes
4
answers
23k
views
How to add a polyfill to nuxt 2.0?
In Nuxt 1.4.2, I had the following in my nuxt.config.js:
build: {
vendor: ['babel-polyfill'],
babel: {
presets: [
['vue-app', {
useBuiltIns: true,
targets: { ie: 11, ...
- 63.7k
24
votes
1
answer
7k
views
What do the hash marks (#) mean in Vue?
I am a rather new Vue developer.
Everywhere I go in our stack, I see code like this inside our components components:
<template #item.active="{ value }">
<div :aria-label="...
- 80.1k
24
votes
3
answers
14k
views
Are we forced to use 'unsafe-inline' in our CSP when using Vue.JS?
Is there a way to make Vue.js to work with CSP properly?
When I run my spa application (resulting from npm run generate with Nuxt.js), I will get several warnings such as these:
Refused to apply ...
- 5,700
24
votes
4
answers
19k
views
How to get rid of ESLint error <template v-for> key should be placed on the <template> tag?
I am using NuxtJS with Vuetify in an app. When showing a table of records with v-data-table, I want to show a badge if the item.isActive is true. For that, I am looping over <template> inside &...
user16583522
24
votes
2
answers
10k
views
Nuxt huge memory usage / leakage and how to prevent
I'm on Nuxt v2.13 and Vuetify v2 , also using keep-alive in my default layout. As my app got bigger and bigger , I noticed the memory problem more and more so that my app needs at least around 4GB RAM ...
- 1,127