Migrating Layouts from Nuxt 2 to Nuxt 3

⚡️ Latest Posts & Comments
1

Originally published at: Migrating Layouts from Nuxt 2 to Nuxt 3 - Server Side Up

One of the first steps I did when migrating from Nuxt 2 to Nuxt 3 was to migrate my app’s layout. Since the layout was essentially the shell of my application, I figured this was a good place to start. Remember, we aren’t using Nuxt bridge and doing a straight Nuxt 2 to Nuxt 3…

2

would be nice if you showed how to change project settings such as package.json to include Nuxt3 and Vue3, as otherwise I can’t even start this course.

currently when adding "nuxt": "npm:nuxt3@latest" and "vue": "^3.2.33" I am getting error from SemVer:

 ERROR  Cannot start nuxt:  Invalid Version: null   

  at new SemVer (node_modules/@nuxtjs/gtm/node_modules/semver/classes/semver.js:19:13)
  at compare (node_modules/@nuxtjs/gtm/node_modules/semver/functions/compare.js:3:3)
  at Object.lt (node_modules/@nuxtjs/gtm/node_modules/semver/functions/lt.js:2:29)
  at requireNuxtVersion (node_modules/@nuxtjs/gtm/lib/compatibility.js:9:14)
  at Object.gtmModule (node_modules/@nuxtjs/gtm/lib/module.js:10:3)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:392:20)
  at processTicksAndRejections (internal/process/task_queues.js:95:5)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:1318:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6734:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6777:5)
3

I’ll take a look at that and see what I can come up with. Doing an in-place upgrade is going to be a bit of a challenge due to how much Nuxt 3 has changed, but I’m sure it’s possible!