Repositories

Feed

DPvic

DPvic posted a new question

nuxt.js β€’ 3 hours ago

Mismatching childNodes vs. VNodes with <noscript>

Hi, I have some sliders and images loaded with lazyload on my site. All works fine, but the crawlers are not loading them properly, so I created a <noscript> slider only with css. If the Js is disabled the <noscript> slider is loading fine but if the Js is enabled the app crashes and throws:

 - vue.runtime.esm.js:6037 Mismatching childNodes vs. VNodes
- The client-side rendered virtual DOM tree is not matching server-rendered content

Is there any chance to just ignore this tag completly at CSR?
My code looks like:
<noscript>

<youtube v-if="this.product.gallery.video" :video-id="getYoutubeUrl(this.product.gallery.video)" :player-vars="playerVars"> </youtube>
</noscript>

Note that this is happening also on the images done with lazyload:

<no-ssr> <v-lazy-image :srcset="<code>${mainMobileThumbnail} 200w, ${mainThumbnail} 400w</code>" :src="mainThumbnail" :alt="alt" /> </no-ssr> <noscript> </noscript>

valeriosillari

valeriosillari posted a new question

nuxt.js β€’ 3 hours ago

Nuxt Edge : adding/handling babel polyfill?

I am starting using Nuxt Edge and trying to update a project based on Nuxt 1.4.2.

On Nuxt v1 I've added the babel polyfill for a IE11 compatibility following documentation and info n the forum, and it works.
I've used to install the npm package, and the nuxt config file I added the babel polyfill as vendor.

Now on Nuxt Edge the vendors are gone.
When I run Nuxt, the CLI give me a warning about vendor: "vendor has been deprecated due to webpack4 optimization"

So my question is: how can add on Nuxt Edge Babel Polyfill?

Anyone could give me some tips?
I see articles where people talking about the removal of vendors, but I didn't find anything explaining how to handle the old dependencies using vendor …

thanks :)

ThomasKientz

ThomasKientz posted a new question

nuxt.js β€’ 5 hours ago

Google tag manager - send an event

I have successfully installed the google-tag-manager module https://github.com/nuxt-community/modules/tree/master/packages/google-tag-manager

I am trying to send a conversion event with :

gtag("event", "conversion", { send_to: "AW-XXXXXXX/mgcSCLyv-ogBEJH8wr0D" });

but I am getting the error

ReferenceError: gtag is not defined

Any idea ?

mauxtin

mauxtin posted a new feature request

auth-module β€’ 8 hours ago

idea Only include (login) facebook scripts when needed

What problem does this feature solve?

At this point, facebook login scripts are loaded to every page even when they are not needed.

What does the proposed changes look like?

A way of specifying in which pages should the script be loaded.

qm3ster

qm3ster implemented the feature request #c7627

nuxt.js β€’ 8 hours ago

idea Nuxt generate programmatic usage

See @qm3ster comment

namnguyen92

namnguyen92 posted a new question

nuxt.js β€’ 18 hours ago

How to disable html minify with build mode

Hi everyone,
I have a problem with nuxt.js.
when i view source code, but head tag and body tag minified.
how to get it formatted
Thank for reading.

uptownhr

uptownhr posted a new bug report

nuxt.js β€’ 20 hours ago

bug Nuxt SSR crashes with 200 response code

Version

v1.4.2

Reproduction link

https://github.com/uptownhr/nuxt-issue-3914

Steps to reproduce

  1. clone repo
  2. yarn
  3. yarn build
  4. yarn start
  5. ab -c -n 20000

The STR is not straight forward as I'm only able to reproduce this on a live project I have and running ab -c 2 -n 20000. It's only once the server has been hit around 10k times where the bug Maximum Stack on VueComponent.mergeDataFn is triggered.

Once this error is triggered, I can see on the log statusCode: 500, however the web server still responds with 200 and shows an error page.

{ RangeError: Maximum call stack size exceeded
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1164:34)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51)
www_1       |     at VueComponent.mergedDataFn (/www/node_modules/vue/dist/vue.runtime.common.js:1166:51) statusCode: 500, name: 'RangeError' }

What is expected ?

When the SSR rendering crashes, the web response should also be a 500.

Second thing that should probably is happen is also kill the server, so the process manager has a chance to reboot the server.

What is actually happening?

The server errors and still returns a 200. This causes error monitors not be able to alert. Also because it catches the crash and not actually crash, any process managers listening to restart the server cannot.

wildan2711

wildan2711 posted a new question

auth-module β€’ 20 hours ago

i18n paths using nuxt-i18n for login route

I am currently using both @nuxt/auth and nuxt-i18n modules, and how do I enable i18n paths for the login route?

For example, when I'm using localePath('login') for routing, it correctly generate links to the active language:

default (en) -> /login
id -> /id/login
zh -> /zh/login

But when I route to the page using a non-default language (id, zh, etc.), it always redirects to /login only, thus resetting my i18n language state.

Thank you.

oscarlomas09

oscarlomas09 posted a new question

nuxt.js β€’ 20 hours ago

Nuxt-link clears cookie-storage whenever navigating to new layout

I am making a nuxt application that integrates with Feathers JS and uses its client for authentication. Because I am using nuxt I am also using Cookie-Storage for storing the session and other user data.

Login works and the cookies are stored correctly, which then redirects the user to a dashboard page. This dashboard page then has links to different pages that are private and only viewable when the user is logged in. All of this works and I can navigate correctly between pages. The problem begins when I navigate to the Settings Page.

The settings page uses a different layout and is not part of the private pages layout. It should still be protected too and work as a private page, it just has a different layout. So whenever I use

<nuxt-link to="/dash/">Dash</nuxt-link> <!-- works (layout: private) -->
<nuxt-link to="/user/">User</nuxt-link>  <!-- works (layout: private) -->
<nuxt-link to="/settings/">Settings</nuxt-link> <!-- fails & clears cookies(layout: settings) -->

After navigating to the settings page with a different layout, all document cookies get set to undefined

Has anyone had this issue?

annuranjan

annuranjan resolved the question #c7761

nuxt.js β€’ a day ago

Nuxt error | Error: Cannot resolve "@nuxtjs/pwa"

I solved it by reinstalling nuxt: "yarn add nuxt"

medj

medj posted a new question

nuxt.js β€’ a day ago

Supporting Themeable App

Is there an ideal way to structure my app so that I can support supporting multiple versions of an app?

For example, I may have a default configuration file at ~/config/conf.json, but let's say I have a version of my app, called org1 as an example. The org1 might have a configuration file located at ~/clients/org1/config/conf.json. If I were to let's say build my app in this way npm run dev --client org1, I would expect it to be the one that's used.

I would like to support the same idea with images and CSS.

Just wondering if there is something available within Nuxt to support this idea.

affanshahid

affanshahid posted a new question

create-nuxt-app β€’ a day ago

Vuetify not in vendor bundle?

New to Nuxt.js, but in the Vuetify template is there a reason why Vuetify is not specified for the vendor bundle?

i.e in nuxt config
β€˜β€™β€™js
build: {
vendor: ['vuetify']
}
β€˜β€™β€™

aldarund

aldarund fixed the bug report #c7751

nuxt.js β€’ a day ago

bug Plugins can't be found by an index reference
dualitysol

dualitysol posted a new question

nuxt.js β€’ a day ago

Cant resolve process.vrowser

Hi.
When im adding anywhere if (process.browser) { console.log('BROWSER'); }
Im getting an error:
`error in ./layouts/default.vue

Syntax Error: Unexpected token, expected , (21:13)

19 | // },
20 |
21 | if (process.browser) {
| ^
22 | // const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
23 | // Vue.use(VueAwesomeSwiper)
24 | console.log('BROWSER');`

dualitysol

dualitysol posted a new question

nuxt.js β€’ a day ago

Cant resolve process.browser

Hi.
When im adding anywhere if (process.browser) { // const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr') // Vue.use(VueAwesomeSwiper) console.log('BROWSER'); }
Im getting an error:
error in ./layouts/default.vue

Syntax Error: Unexpected token, expected , (21:13)

19 | // }, 20 | 21 | if (process.browser) { | ^ 22 | // const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr') 23 | // Vue.use(VueAwesomeSwiper) 24 | console.log('BROWSER');

sweetim

sweetim posted a new question

axios-module β€’ a day ago

v5.3.1 has no typings

The latest version from npm has no typings?

sinoru

sinoru posted a new bug report

axios-module β€’ a day ago

bug Return type of $methods in Type Definition is wrong

Version

eca7298

Reproduction link

https://github.com/nuxt-community/axios-module/pull/143

Steps to reproduce

Using $methods(i.e: $post, $get) in TypeScript projects.

What is expected ?

Just works.

What is actually happening?

Return wrong type which is AxiosPromise<T>, which resolved as AxiosResponse<T>.
But $method returns AxiosResponse<T>.data as-is. So It should be just Promise<T>

gaspergrom

gaspergrom posted a new bug report

electron-template β€’ a day ago

bug cannot compile scss in electron-template

Version

v1.1.1

Reproduction link

https://codepen.io/gaspergrom/pen/bxQNgB

Steps to reproduce

in nuxt.config.js
i changed to
css: [
'@/assets/css/global.scss'
]
and it throws error

15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07

This dependency was not found:

..\assets\css\global.scss in ./.nuxt/App.js
To install it, you can run: npm install --save ..\assets\css\global.scss

in normal nuxt structure i can easly add scss like this but in electron template i can't add it … i have to add css not scss

What is expected ?

to compile scss to css in nuxt structure

What is actually happening?

15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07

This dependency was not found:

..\assets\css\global.scss in ./.nuxt/App.js
To install it, you can run: npm install --save ..\assets\css\global.scss

gaspergrom

gaspergrom posted a new question

electron-template β€’ a day ago

cannot compile scss

in nuxt.config.js
i changed to
css: [
'@/assets/css/global.scss'
]
and it throws error

15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: <top>", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07

This dependency was not found:

  • ..\assets\css\global.scss in ./.nuxt/App.js

To install it, you can run: npm install --save ..\assets\css\global.scss

in normal nuxt structure i can easly add scss like this but in electron template i can't add it … i have to add css not scss

Gtanxingwen

Gtanxingwen posted a new question

nuxt.js β€’ a day ago

(index.vue), How to configure dynamic parameters for root routing