#Weird behavior between Nuxt 3.11 and Nuxt 3.15

1 messages · Page 1 of 1 (latest)

finite coyote
#

Since I updated to Nuxt 3.15, basic code is not working anymore.

mounted() {
  console.log("Initialization");
  console.log(this.$route);
  console.log(useRoute())
  let token = useRoute().params.token;
  console.log("token", this.$route.params.token);
  console.log('token', token);
}

How is it possible that token are undefined since they are defined just before and nothing happen between.

What I am missing ?

image.png
versed hearthBOT
#

Hi @finite coyote. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, there are a few important points to consider regarding the issue you're experiencing after updating to Nuxt 3.15:

  1. There have been some changes in how route parameters are handled in Nuxt 3.15, particularly with definePageMeta and the useRoute() composable.

  2. The code you've provided is using the Options API (mounted() hook) mixed with Composition API (useRoute()), which can lead to unexpected behavior.

  3. In Nuxt 3, it's recommended to use the Composition API with <script setup> for better performance and consistency.

To address your specific issue:

  1. The this.$route syntax is part of the Options API and may not work as expected when mixed with Composition API methods like useRoute().

  2. useRoute() should be called within the setup() function or <script setup>, not inside lifecycle hooks like mounted().

  3. The undefined token might be a result of these mixing issues or changes in how route parameters are processed in Nuxt 3.15.

To fix this, you should refactor your code to use the Composition API consistently. Here's an example of how you might rewrite your code:

<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

onMounted(() => {
  console.log("Initialization")
  console.log(route)
  const token = route.params.token
  console.log("token", token)
})
</script>

If you're still experiencing issues after refactoring, it might be related to changes in Nuxt 3.15. You can try setting the compatibility version to 3 in your nuxt.config.ts file as a temporary workaround:

export default defineNuxtConfig({
  experimental: {
    compatibilityVersion: '3'
  }
})
#

For more detailed information on upgrading and compatibility issues, you can refer to the Nuxt Upgrade Guide.

If the problem persists, you might want to create a minimal reproduction of the issue and report it on the Nuxt GitHub repository, as there have been some reported issues with route parameters in Nuxt 3.15.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@finite coyote Kapa.ai is still learning and improving, please let me know how I did by reacting below.

finite coyote
#

i did both and got the same result token is empty

#

@versed hearth are you there ?

versed hearthBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Yes, I'm here and ready to assist you with any questions you may have about Nuxt. How can I help you today?

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@finite coyote Kapa.ai is still learning and improving, please let me know how I did by reacting below.