Nuxt•7mo ago

Nuxt 3 Sitemap with @nuxtjs/sitemap

Hello there. I am a junior frontend dev aswell as a newbie in SEO (but improving !) Sitemaps are for SEO needs a must have, and so i wanted to use the nuxt module to add one. * i added nuxtjs/sitemap with this command yarn add -D @nuxtjs/sitemap * screeshot 1 (left) is a bunch of warnings after installing nuxtjs/sitemap. No error here * According to the documentation, i have to add '@nuxtjs/sitemap' to the modules in nuxt.config. Done * screeshot 2 is the error i get after launching the server with yarn. CTRL+SHIFT+F doesn't find any toValue. I'm stuck here. Anyone can help me ?

42 Replies

manniL•7mo ago

update your nuxt + vue version 🙂 seem like these are really old 😄

KlaphinirOP•7mo ago

Woops 😄 Won't that break other depencies among all the packages installed ?

manniL•7mo ago

why should it break things/other deps? I mean, you only should upgrade to new minor or patch versions, not from e.g. 1.x to 4.x 😄

KlaphinirOP•7mo ago

Btw how can you tell i'm using an older vue version ?

manniL•7mo ago

because toValue came later to vue (3.3+) https://vuejs.org/api/reactivity-utilities.html#tovalue

Vue.js

Vue.js - The Progressive JavaScript Framework

manniL•7mo ago

and that's the error you get

KlaphinirOP•7mo ago

Wow, thanks. However npm show vue version display 3.4.26 which is latest version iirc Do you know where can i change the used vue version in the project ?

manniL•7mo ago

how did you check it?

KlaphinirOP•7mo ago

with this command : npm show vue version

manniL•7mo ago

weird. maybe some subdependency doesn't use an updated vue version then

KlaphinirOP•7mo ago

$ less package.json | grep vue
    "lint": "eslint --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-standard": "^8.0.1",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.2.10",
    "eslint-plugin-vue-libs": "^4.0.0",
    "vue-eslint-parser": "^9.1.0",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "intro-storybook-vue-template": "https://gitlab.com/valueMyCar/vmc-storybook",
    "vue-hotjar-next": "^1.4.0",
    "vue-mapbox-ts": "^0.9.7"
    "**/*.{js,ts,vue,html,css}": [

$ less package.json | grep vue
    "lint": "eslint --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-standard": "^8.0.1",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.2.10",
    "eslint-plugin-vue-libs": "^4.0.0",
    "vue-eslint-parser": "^9.1.0",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "intro-storybook-vue-template": "https://gitlab.com/valueMyCar/vmc-storybook",
    "vue-hotjar-next": "^1.4.0",
    "vue-mapbox-ts": "^0.9.7"
    "**/*.{js,ts,vue,html,css}": [

here is all occurences of 'vue' in my package.json

manniL•7mo ago

try npx npm-why vue because in the package.json, you don't have subdependencies listed

KlaphinirOP•7mo ago

Who required vue:

  vmc-front-v3 > @fortawesome/vue-fontawesome > vue@3.2.47
  vmc-front-v3 > @nuxt/test-utils > vue@3.2.47
  vmc-front-v3 > @pinia-plugin-persistedstate/nuxt > @pinia/nuxt > pinia > vue@3.2.47
  vmc-front-v3 > @pinia-plugin-persistedstate/nuxt > @pinia/nuxt > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > @pinia-plugin-persistedstate/nuxt > pinia-plugin-persistedstate > pinia > vue@3.2.47
  vmc-front-v3 > @pinia-plugin-persistedstate/nuxt > pinia-plugin-persistedstate > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > @pinia/nuxt > pinia > vue@3.2.47
  vmc-front-v3 > @pinia/nuxt > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > @pinia/testing > pinia > vue@3.2.47
  vmc-front-v3 > @pinia/testing > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > @pinia/testing > vue-demi > vue@3.2.47
  vmc-front-v3 > @vitejs/plugin-vue > vue@3.2.47
  vmc-front-v3 > @vue/test-utils > @vue/server-renderer > vue@3.2.47
  vmc-front-v3 > @vue/test-utils > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > @gtm-support/vue-gtm > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > @gtm-support/vue-gtm > vue-router > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @nuxt/vite-builder > @vitejs/plugin-vue > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @nuxt/vite-builder > @vitejs/plugin-vue-jsx > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @nuxt/vite-builder > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @vueuse/head > @unhead/vue > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @vueuse/head > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > vue-router > vue@3.2.47
  vmc-front-v3 > nuxt > @nuxt/vite-builder > @vitejs/plugin-vue > vue@3.2.47
  vmc-front-v3 > nuxt > @nuxt/vite-builder > @vitejs/plugin-vue-jsx > vue@3.2.47
  vmc-front-v3 > nuxt > @nuxt/vite-builder > vue@3.2.47
  vmc-front-v3 > nuxt > @vueuse/head > @unhead/vue > vue@3.2.47
  vmc-front-v3 > nuxt > @vueuse/head > vue@3.2.47
  vmc-front-v3 > nuxt > vue@3.2.47
  vmc-front-v3 > nuxt > vue-router > vue@3.2.47
  vmc-front-v3 > pinia > vue@3.2.47
  vmc-front-v3 > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > vue-mapbox-ts > vue@3.2.47

Who required vue:

  vmc-front-v3 > @fortawesome/vue-fontawesome > vue@3.2.47
  vmc-front-v3 > @nuxt/test-utils > vue@3.2.47
  vmc-front-v3 > @pinia-plugin-persistedstate/nuxt > @pinia/nuxt > pinia > vue@3.2.47
  vmc-front-v3 > @pinia-plugin-persistedstate/nuxt > @pinia/nuxt > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > @pinia-plugin-persistedstate/nuxt > pinia-plugin-persistedstate > pinia > vue@3.2.47
  vmc-front-v3 > @pinia-plugin-persistedstate/nuxt > pinia-plugin-persistedstate > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > @pinia/nuxt > pinia > vue@3.2.47
  vmc-front-v3 > @pinia/nuxt > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > @pinia/testing > pinia > vue@3.2.47
  vmc-front-v3 > @pinia/testing > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > @pinia/testing > vue-demi > vue@3.2.47
  vmc-front-v3 > @vitejs/plugin-vue > vue@3.2.47
  vmc-front-v3 > @vue/test-utils > @vue/server-renderer > vue@3.2.47
  vmc-front-v3 > @vue/test-utils > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > @gtm-support/vue-gtm > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > @gtm-support/vue-gtm > vue-router > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @nuxt/vite-builder > @vitejs/plugin-vue > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @nuxt/vite-builder > @vitejs/plugin-vue-jsx > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @nuxt/vite-builder > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @vueuse/head > @unhead/vue > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > @vueuse/head > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > vue@3.2.47
  vmc-front-v3 > @zadigetvoltaire/nuxt-gtm > nuxt > vue-router > vue@3.2.47
  vmc-front-v3 > nuxt > @nuxt/vite-builder > @vitejs/plugin-vue > vue@3.2.47
  vmc-front-v3 > nuxt > @nuxt/vite-builder > @vitejs/plugin-vue-jsx > vue@3.2.47
  vmc-front-v3 > nuxt > @nuxt/vite-builder > vue@3.2.47
  vmc-front-v3 > nuxt > @vueuse/head > @unhead/vue > vue@3.2.47
  vmc-front-v3 > nuxt > @vueuse/head > vue@3.2.47
  vmc-front-v3 > nuxt > vue@3.2.47
  vmc-front-v3 > nuxt > vue-router > vue@3.2.47
  vmc-front-v3 > pinia > vue@3.2.47
  vmc-front-v3 > pinia > vue-demi > vue@3.2.47
  vmc-front-v3 > vue-mapbox-ts > vue@3.2.47

I Guess i'm using vue 3.2.47 x)

manniL•7mo ago

Interesting 🤔 Yeah, indeed 😄 still strange because the error hints something different 🙈

KlaphinirOP•7mo ago

That is very weird lol

manniL•7mo ago

do you have any node_modules in folders "above" your project folder

KlaphinirOP•7mo ago

I'll check

manniL•7mo ago

so imagine the path being /a/b/vmc-front-v3/, do you have some in /a/b or /a oh wait no no 3.2.47 is old so you use an old version indeed toValue is available in 3.3 what you can do: remove your package-lock.json and run npm i. This will install the dependencies with their "newest versions" based on the constraints or you can try to only update vue npm update vue

KlaphinirOP•7mo ago

No node_mules above fortunately. I'll try that

KlaphinirOP•7mo ago

OOF

KlaphinirOP•7mo ago

restauring packages-lock.json and running npm update vue leads to the same issue

manniL•7mo ago

yeah, you need a newer eslint-plugin-prettier version I suppose ah no bump prettier 😄

KlaphinirOP•7mo ago

This feels like a rabbit hole 😄

manniL•7mo ago

(deps are a mess sometimes) yeah, well can you show your whole package json?

KlaphinirOP•7mo ago

isn't it the beginning of me being fired for sharing potentially secret information ? haha (i changed nuxt version from ^3.2.0 to ^3.11.0 in the packages.json)

package.json

manniL•7mo ago

there shouldn't be any secret info in the package json 😛

KlaphinirOP•7mo ago

Lovely

manniL•7mo ago

ah yeah, bump prettier to the latest major (3.x) and then you should be able to resolve that issue

KlaphinirOP•7mo ago

i think i already once have taken that road be ready for some snorkeling lol

KlaphinirOP•7mo ago

manniL•7mo ago

and it continues 😄

manniL•7mo ago

https://www.npmjs.com/package/eslint-plugin-vue-libs seems not to be maintained anymore

npm

eslint-plugin-vue-libs

eslint plugin for vue.js projects. Latest version: 4.0.0, last published: 5 years ago. Start using eslint-plugin-vue-libs in your project by running npm i eslint-plugin-vue-libs. There are 13 other projects in the npm registry using eslint-plugin-vue-libs.

manniL•7mo ago

❗ Note this is an internal plugin/config for the development of Vue itself, not intended for Vue app development.

I mean, you can remove that IMO 😄

KlaphinirOP•7mo ago

Oh, indeed

KlaphinirOP•7mo ago

Should i force the uninstall ?

manniL•7mo ago

actually the easiest would be changing things in your package.json and then removing the lockfile and using npm i If you want to you could even pin the versions before to what they are now so you don't update anything else "accidentally" but that's up to you

KlaphinirOP•7mo ago

I agree with you However, how can i know what version for which package i want ? Ok i have updated all the dependencies i needed (aswell as removing some deprecated ones) now when i launch the app, i arrive on a blank page without any vue components, no error on the console, and no error on the app.vue

KlaphinirOP•7mo ago

manniL•7mo ago

From here, go with basic debugging * if you remove everything from the app.vue and render a TEST h1, does it work? * If not, remove plugins/modules * etc etc but here it looks like it doesn't render anything which is super weird server console might have some errors

KlaphinirOP•7mo ago

How can i check this server console ?
If thats "main" in "output" section of terminal, no errors. Tried with some paragraphs. Nothing renders 😦 Even if i do npm i I sometimes have twelve of these ERROR Pre-transform error: Missing "./dist/app/compat/capi" specifier in "nuxt" package (x12), maybe that's the culprit

manniL•7mo ago

that seems like 😄

KlaphinirOP•7mo ago

Well, i've no clue on why i have these. there is no hint. If that's something you know, i'll be glad to hear 😄 I have investigated by starting a new branch with older dependancies and trying to update one by one seeing if the application launches. With nuxt 3.6.5, all good, With nuxt 3.7.0 and so forth, ERROR Missing "./dist/app/compat/capi" specifier in "nuxt" package (x12) and white screen at app launch

Gaming

Programming

Nuxt 3 Sitemap with @nuxtjs/sitemap