Nuxt•2mo ago

Converting a project from vue to nuxt and need help

I am developer and I have been working with nextjs and reactjs before and recently I came across a vueJs application and I had to shift it to nuxtjs to use SSR and to have better SEO but the problem is I have never worked with vue or nuxt before and thus I am having alot of problems. I have shifted the files from vue to Nuxt but the routing is dynamic and isn't working properly. The application is like a blog with different articles and each page is created dynamically from an array of objects and then the url for each page is linked and page is created using a slug. Is there someone who could help me?

2 Replies

kapa.ai•2mo ago

Hi @Huzaifa Ahmad. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you're transitioning from a Vue.js application to Nuxt.js and encountering issues with dynamic routing for your blog-like structure. I can certainly help you with that based on Nuxt's approach to dynamic routing. In Nuxt, dynamic routing is handled through the file system, which is different from Vue's router configuration. Here's how you can set up dynamic routing for your blog articles: 1. Create a dynamic route: In your pages directory, create a file structure like this:

   pages/
     articles/
       [slug].vue

   pages/
     articles/
       [slug].vue

The [slug].vue file will handle all dynamic article routes. 2. In your [slug].vue file, you can access the route parameters:

   <script setup>
   const route = useRoute()
   const slug = route.params.slug
   
   // Use the slug to fetch the corresponding article data
   </script>
   
   <template>
     <div>
       <!-- Your article content here -->
     </div>
   </template>

   <script setup>
   const route = useRoute()
   const slug = route.params.slug
   
   // Use the slug to fetch the corresponding article data
   </script>
   
   <template>
     <div>
       <!-- Your article content here -->
     </div>
   </template>

3. For linking to these dynamic pages, you can use the <NuxtLink> component:

   <NuxtLink :to="'/articles/' + article.slug">
     {{ article.title }}
   </NuxtLink>

   <NuxtLink :to="'/articles/' + article.slug">
     {{ article.title }}
   </NuxtLink>

This structure allows Nuxt to automatically create routes for each article based on its slug. For more detailed information on Nuxt's routing system, including dynamic routes, you can refer to the Nuxt Routing documentation. If you're dealing with data fetching for these dynamic routes, you might want to look into Nuxt's data fetching strategies, which are designed to work well with SSR for improved SEO. Remember that Nuxt 3 uses Vue 3, so if your original Vue project was using Vue 2, you might need to make some adjustments to your component syntax and composition API usage. If you have more specific questions about implementing this in your project or encounter any particular issues, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Converting a project from vue to nuxt and need help

Did you find this page helpful?