Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
pinia
🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
core
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)
You can find all the code from the article and an example of the project here.
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).
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, } } }
We use Vue Router, it's very flexible API compared to any routers.
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.
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:
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:
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.