Coding Shorts: Nuxt without Nuxt - Paged Based Routing and Layouts

After the first video in this series using unplugin's auto routing, I found out it was incompatible with several of these other plugins. So, in try 2, I show you how to use page-based routing and layouts in your Vue projects. Let's see how it works!
My new Vue 3 course is starting April 2nd. See more here:
- shawnl.ink/paced-vue
00:00 Introduciton
02:24 The Project
03:31 Adding the Pages Plugin
05:10 Modifying the Routes
05:42 Parameterized Routes
07:45 Adding Metadata
09:13 Layouts
12:51 Wrapping Up
If you like this video, you might like other videos in my Instructional Videos:
- • Instructional Videos
Source code:
github.com/shawnwildermuth/co...

[@geraldmaale]

I will definitely give this a try. I get annoyed with the build time of nuxt but wanted to enjoy the benefits of pages and layouts as well.

[@swildermuth]

The next video is showing how to add auto components and auto imports too. We're only 1/2 way there ; )

[@willcrowther4456]

I really like this direction with the page based routing. Can you give more details about the issues you ran into with the unplugin-vue plugins you were showing in the first demo? I added it to my sample app and it seems to be working working great for me.

[@swildermuth]

The unplugin-vue version used nested routing for nested folders, and the Layout plugin wasn't setup for that so layout were being nested too (so doubling layouts).

[@willcrowther4456]

@@swildermuth Ok. I needed nested routing and think that is a necessity to a good general solution. Just adding a wrapper with a slot on the pages where it is needed so not sure a Layout component is actually needed.

[@codedjango]

I wish vite has something like this for ssr....I hate using nuxt just for ssr sake

[@swildermuth]

Like this: vitejs.dev/guide/ssr