Making Nuxt.js clone with Vue 3 and Vite (Vue Server Side Rendering)

• vue3-vite-custom-ssr-example

  1 10 10.0 TypeScript

  You can find all the code from the article and an example of the project here.

• CodeRabbit

  coderabbit.ai featured

  CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

  

• vite

  862 69,303 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

  I recommend that instead of manually initializing the project, I recommend to clone the official SSR-example or my demo project for this article (I recommend it).

• pinia

  33 13,296 9.3 TypeScript

  🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support

  

  const authMiddleware: Middleware = ({ pinia }) => { // !!! Important !!! // tell all the stores you are contacting // Pinia instance, otherwise you will have problems because Pinia will access the global object // https://github.com/vuejs/pinia/blob/8626aac0049243de231401a01fe20092eeaf279c/packages/pinia/src/store.ts#L870 if (!authStore(pinia).isAuth) { return { path:'/login', status: 401, } } }

• router

  23 3,989 9.1 TypeScript

  🚦 The official router for Vue.js (by vuejs)

  

  We use Vue Router, it's very flexible API compared to any routers.

• connected-react-router

  7 4,726 0.0 JavaScript

  A Redux binding for React Router v4

  So, I think many people are not familiar with the concept of integrating a router into the Store, but in fact they most likely met the Connected React Router library, it allows, for example, with successful authentication directly in the action, to redirect the user to the /profile or /dashboard page, this allows the authentication logic do not spread beyond the action. To begin with, we will write timings for the state of this store.

• head

  13 914 4.5 TypeScript

  Document head management for Vue. Powered by Unhead. - 🌇 Sunset (by vueuse)

  

  I think it's no secret that Server Rendering is usually resorted to if search engines need correct indexing. To work with head, Vue 3 already has the vueuse/head library, while it supports SSR. You can find all the documentation on working with it in their repository, and I'll show you a simple example and help you introduce it to server rendering. And so in the application code, you just need to call useHead at any level of component nesting:

• Next.js

  2,203 127,760 10.0 JavaScript

  The React Framework

  

  For example Next has one big architectural flaw (At the time of writing article), it does not know how to work with nested routes. For those who do not know, Vue Router allows using the component to display child pages, at any nesting level. I have prepared a visual visualization of what nested routes are, for those who are familiar with React + Remix I think it will be very familiar. Because nested routes are killer features Remix. By the way, while I was writing the article, Layouts RFC came out on the Next blog.js, which means that soon there will be support in Next.js . Let's go back to the Remix framework:

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• core

  337 48,047 9.9 TypeScript

  🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)

  

  And so in Vue 2 we had such a cool feature as serverCacheKey, this is the thing that allowed caching at the component level. But there is no such chip in Vue 3, here are issues. However, considering how much the SFC Compiler was optimized, the benefit from serverCacheKey would not be so great.

Suggest a related project