VueJS

Nuxt 3 Demo App with Prerender and SSR

Published Aug 2, 2023

Updated Oct 12, 2023

3 min read

Introduction

The quest for an optimal web application involves numerous factors, such as performance, user experience, and search engine optimization (SEO). Nuxt 3 provides excellent features out-of-the-box that can help you tackle these aspects efficiently.

This article will guide you in creating a Nuxt 3 application using Server Side Rendering (SSR) and pre-rendering capabilities. We'll craft an application that offers a seamless user experience, superior performance, and improved SEO.

Server Side Rendering in Nuxt 3

Enhancing User Experience and SEO with SSR

In the world of web development, Server Side Rendering (SSR) has gained significant traction. It refers to the server rendering the webpage upon each request rather than the client. With SSR, your web page arrives fully formed at the client's doorstep, reducing the time for the first painting.

The advantage of SSR extends beyond just performance and user experience. It's also a darling of search engine crawlers, which find it easier to index your website with fully formed page content at the time of their crawl. In simple terms, it's like providing a tour guide to lead the search engine around your website, ensuring they get all the spots!

The Power of SSR in Nuxt 3

Nuxt 3 has built-in support for SSR by default. It allows you to optimize your application by loading the data before rendering the page. To take advantage of SSR, you simply build your application as you usually would. In this case, using the fetch() method to load some.

<script setup>
import { ref } from 'vue'

const data = ref(null)

async function fetchData() {
  const response = await fetch('https://api.example.com/data')
  const jsonData = await response.json()
  data.value = jsonData
}

fetchData()
</script>

<template>
  <div>
    <h1>Data fetched from the server</h1>
    <pre>{{ data }}</pre>
  </div>
</template>

In this example, the fetchData function fetches the data before rendering the page. The data then gets displayed within the <pre> tag.

Sidenote, if you wanted to disable SSR in your Nuxt application, you would do so in your nuxt.config.ts file:

export default defineNuxtConfig({
  ssr: false # this usually defaults to true
})

More details on how this works can be found in the rendering modes section in the official Nuxt 3 documentation.

Pre-rendering in Nuxt 3

Amplifying Application Performance with Pre-rendering

While SSR has its advantages, another superhero in our story is pre-rendering. Pre-rendering refers to the process of generating the static HTML pages of a site in advance. It's like preparing a feast before the guests arrive so you can serve them promptly.

Like SSR, pre-rendering enhances SEO, as search engines can index fully rendered pages. Especially for content-heavy applications, pre-rendering can give a turbo boost to performance, leading to better user engagement and retention.

Leverage Pre-rendering with Nuxt 3

Nuxt 3 supports SSR and Static Site Generation (SSG), including pre-rendering. To enable prerendering, you need to export your routes in nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/route1', '/route2', '/route3']
    }
  }
})

These routes will be pre-rendered during the build phase, allowing for swift navigation. Let's update our application to pre-render the users' list:

<script setup>
import { ref } from 'vue'

const users = ref([])

async function fetchUsers() {
  const response = await fetch('https://api.example.com/users')
  const userJson = await response.json()
  users.value = userJson
}

fetchUsers()
</script>

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

In the nuxt.config.ts, include the users' route for pre-rendering:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/users']
    }
  }
})

Going beyond with Nuxt 3

While SSR and pre-rendering are significant for performance and SEO, Nuxt 3 offers more advanced features like hot module replacement, Vue 3 integration, improved error handling, and more. Nuxt 3 also has different kinds of rendering modes for different applications; in our SSR case, we used the default Universal rendering mode. Leveraging these features allows you to develop robust, high-performance, and user-friendly applications.

Conclusion

In this article, we delved into the concepts of SSR and pre-rendering in Nuxt 3. We explored how these techniques contribute to enhancing performance, user experience, and SEO. You can create exceptional web applications by integrating Vue 3's capabilities with Nuxt 3's robust features.

A well-structured, performant, and SEO-friendly application not only attract users but also retains them. Embrace the power of Nuxt 3 and Vue 3 in your development journey. Happy coding!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Allan M. Jeremy
Allan Jeremy is a self-proclaimed polymath, entrepreneur and Senior Software Engineer at ThisDot Labs. He is an AI and crypto enthusiast that loves to learn most things tech and business as well as sharing what he learns.
@theallanjeremy @AllanJeremy

How to Style Using SCSS in Nuxt

Introduction SASS makes working on large projects more organized. It allows you to use variables, nested rules, mixins, and functions. The preferred styling method in Nuxt is component file styling, and integrating SASS into your project can make your component file styling appear more understandable. How to Import SASS in Nuxt To add SASS after setting up your Nuxt application, we will first install SASS and sass-loader. Let's run either of these commands depending on our package manager. ` Component File Styling With SASS and sass-loader installed in our project, we can now write SCSS in our component file. Lets see an example: ` In the example above, all we need to specify is lang="scss" on the style tag, and we can now write scss in that component. Global File Import and Variables To import SCSS files that are global, like variables and mixins files, we need to install style-resources: ` Next, we can update our nuxt.config.js file by adding the module we just installed to the buildModules. ` Next, let's create a global variables.scss file in our assets/style folder. Add a single variable inside: ` Next, we need to import this file inside the nuxt.config file: ` Now we have the variables in our variables.scss available in all our components for use. Next, let's test it out by updating our button component. ` We have updated our button variant color to be our global SCSS variable ($primary and $white). Mixins Mixins in SASS are used to write styles that can be reused in other parts of the code. Let's create a sample mixin to center an item. ` Next, we need to import our mixin in Nuxt config: ` Now, let's update our button component with our mixin: ` Functions Functions in SASS are used to write complex operations or behaviours that can be reused in other parts of the code. Let's create a function to handle a media query for our application. ` This is a basic example of what a function can be used for. More complex cases, like calculating percentage, can also be done. Let's import our mixin in Nuxt config: ` Let's update our button component with our function: ` We have been able to add SASS to our Nuxt project, and also looked at some ways in which SASS can make our codebase look cleaner. I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github....

Aug 17, 2022

2 mins

Web DevelopmentNuxtJS

Announcing Our New Starter.dev Kit: Nuxt 3 with Pinia and Vuetify

We're thrilled to unveil our brand new starter.dev kit: a Nuxt 3 kit using Pinia as the state manager and Vuetify for styles. While Nuxt 2 is still reliable and powerful, Nuxt 3, being the latest iteration of this versatile framework, brings an array of innovative features and enhanced flexibility that make it an ideal choice for your next development project. Now, let's explore what this kit offers, and how it can help you in your upcoming application development. Nuxt 3 vs Nuxt 2 First, why Nuxt 3? Let's delve into what Nuxt 3 is and why we've opted for this technology for our kit. Nuxt 3 is a modern web development framework based on Vue 3 for building server-side rendered applications, single-page applications, or statically rendered websites. It's an evolution of Nuxt 2 and provides an improved developer experience and better performance. Let’s see what features it has to offer in comparison to Nuxt 2! - Built on Vue 3: Nuxt 3 is built from the ground up using Vue 3, which brings a host of new features including conditional suspending of component rendering via the Suspense API, more flexibility for global mounting, and a Virtual DOM rewrite for better performance and improved TypeScript support. - Nitro Engine: Nitro, the new rendering server for Nuxt 3, is built for serverless architectures and offers extremely fast cold-start times. Nuxt 3 is planned to support Incremental Static Regeneration (ISR) using the Nitro renderer. - Native Composition API Support: Nuxt 3 has native support for the Vue Composition API, a feature that Nuxt 2 had to rely on an external library to use. The Composition API changes how code is written in Vue and is now built-in with Nuxt 3 since it is built on top of Vue 3. - Faster Hot Reloads with Vite: Nuxt 3 uses Vite for Hot Module Replacement (HMR), which is used when the server re-renders the updated components of your application in both development and production. This leads to faster hot reloads. - Additional Features: There are several other salient features of Nuxt 3, including a new Nuxt CLI (nuxi), NuxtJS Dev tools, and global auto imports of common functions such as `. Nuxt 3 brings remarkable performance enhancements, significantly reducing the size of server deployments and client bundles. These improvements are made possible by implementing a new renderer, faster hot reloads, and built-in support for native TypeScript and Composition API, as mentioned earlier. With such impressive features at our disposal, the decision to choose this framework was undoubtedly the right one. Pinia Let's talk about the state management library we've chosen. As the successor to Vuex, Pinia is now the default state management library for Vue 3. Pinia shines when sharing global state within your application; it ensures security and ease of use, especially when using SSR, which is often the case with Nuxt. Pinia's integration with Nuxt 3 is seamless, benefiting from Vue 3's inbuilt Composition API. The use of Pinia greatly simplifies the state management in Vue-based applications. Vuetify Vuetify is an exceptional Material Design framework for Vue.js that assists in building elegant, responsive, and interactive web applications. In Nuxt 3, the integration of Vuetify can be done smoothly, thanks to Nuxt's flexibility. This makes the process of building modern, visually appealing applications more efficient and enjoyable. What's inside the Nuxt 3 Kit? Our aim in developing the starter.dev kit is to equip you with essentials while maintaining flexibility. The kit incorporates a counter component that manages state using a Pinia store, and a Fetch component showcasing data fetch in Nuxt 3. We decided to omit Storybook and testing from this starter.dev kit. Storybook is currently incompatible with Nuxt 3, but rest assured, we will incorporate it as soon as compatibility support is introduced. Regarding testing, tools like Vitest and others have been excluded for now. The current Nuxt 3 testing landscape is still under development and not deemed production-ready. As the testing environment matures, we will update our starter.dev kit to include the most efficient and reliable testing solutions. Furthermore, the kit includes configurations for ESLint, Prettier, and is written entirely in TypeScript. This saves you significant time by taking the hassle out of setting up these tools in a new project. How do I use the kit? Use our starter.dev CLI! This is by far the easiest method. Simply run the command ` This will display a list of available starter.dev kits. Select the one that fits your needs - in this case, the ` one! You'll be asked to provide a name for your new project, and once that's inputted, the CLI will begin preparing the kit for you! Once installed, you can cd into your new project directory with the name you provided earlier, and start coding. But don’t forget to install the required dependencies with your package manager of choice (I recommend pnpm 🫣). For a deeper insight into the kit, visit https://starter.dev/kits/nuxt3-pinia-vuetify/ where you can read the README.md file for more detailed documentation, as well as take a look at the source code. Don't forget to read the package.json file to see the scripts available for the kit. Conclusion In a nutshell, our new starter.dev kit integrates Nuxt 3, Pinia, and Vuetify.. This article not only introduces you to the kit but also delves into the features and advantages that make it stand out - the improved performance of Nuxt 3, the ease of state management with Pinia, and the sophisticated stylings of Vuetify. As the digital landscape evolves, we will keep this kit updated with tools like Storybook and comprehensive testing capabilities as soon as they become Nuxt 3-compatible. That's it, folks! We're eager for you to take this kit for a spin in your next project. We've built it with much care and attention to detail, ensuring it brings significant value to your development process. We hope you find it as enjoyable to use as we did creating it. Happy coding!...

Jul 24, 2023

5 mins

NuxtJS

Improving the Performance of Vue 3 Applications Using v-memo and KeepAlive

Introduction When building a Vue application, you will encounter performance issues as your app grows, causing it to run slower than it should. Most performance problems in web apps arise from performing tasks repeatedly, even when there is no need to. For example, if you had a list of thousands of items, and had to re-render all items when a single thing changed, you'd quickly encounter performance problems. The ideal solution would be to update only what changes. For the most part, VueJS does this well, and Vue 3 came with many performance improvements out of the box. However, in more complex applications, we may need more fine-grained control over what gets re-rendered and what does not. In this article, we are going to look at how we can use v-memo, and KeepAlive as solutions to performance problems in Vue applications. Two leading solutions to performance problems in Vue JS Memoization Memoization is like a superpower that helps your app remember things without having to constantly redo the same calculations, or processes over and over again. This allows the applications to perform faster and more efficiently, which is the ultimate goal for any web developer. Think about it; when you were a kid, your teachers always taught you to memorize things to save time. The same is valid for web applications. With memoization, they can remember the results of a calculation or process, so they don't have to waste time recalculating it every time they need the same result. For example, imagine you have a website that requires users to enter their birthdates to access certain content. If a user enters their birthdate for the first time, the application will calculate their age. With memoization, the next time the user comes to the website and enters their birthdate, the application can use the previously computed result instead of recalculating it from scratch. That's the beauty of memoization! It saves time and resources, and gives the user a faster and smoother experience. Try memoization if you want your web application to perform at its best. You'll be amazed at how much of a difference it makes! To take advantage of this in Vue, we'll be using the v-memo directive. More on this shortly. Caching Caching works by storing a copy of frequently used data and resources so that the application can access them quickly without having to go through the entire process of rendering and fetching the data from scratch. Think of it like this. When you visit a website for the first time, the browser has to fetch all the resources needed to display the page. But if you see the same website again, the browser can use the cached data, resulting in a faster and smoother experience for the user. We can take advantage of caching in our Vue applications using KeepAlive. Using v-memo V-memo was added in Vue 3.2 and, as far as I am aware, will not be back-ported to Vue 2. You can use v-memo by passing the directive to the element/component whose dependencies you want to memoize. In this case, this would be an element/component that would be computationally expensive to re-render each time a dependency changed. Here's an example of how you could use the v-memo directive: ` Note that it accepts an array of dependency values. And if every value in the array is the same as the last render, updates for the entire sub-tree will be skipped. The dependency values are those that's changes you'd like to be checked and memoized anytime they change. You can learn more about how v-memo works from the official Vue JS documentation. In this case, if the value of dependencyA or dependencyB changed, we would re-render the children of the div. However, if neither dependencyA nor dependencyB changed, we would skip the re-rendering process. This means that any computationally intensive tasks that were needed to occur in the re-render would not be triggered, and as a result, our application would perform better. Using KeepAlive Another alternative solution to performance issues is caching, where the KeepAlive option comes in. KeepAlive is a built-in vue component that allows us to cache component instances when dynamically switching between multiple components conditionally. Using KeepAlive in Vue 3 is straightforward. You can wrap the components you want to cache inside a KeepAlive component. Here's a sample code: ` In this example, we use the KeepAlive component to conditionally cache the ComponentA and ComponentB instances, which are dynamically switched using the currentComponent reactive property. With the KeepAlive component, we can maintain the state of these components even when they are not active, which can lead to improved performance. Conclusion In this article, we talked about how we can improve the performance of our VueJS applications using memoization and caching. In the case of memoization, we can use the v-memo VueJS directive that was introduced in Vue 3.2. Alternatively, when we want to cache component instances, we can use the built-in Vue KeepAlive component. By utilizing both v-memo and KeepAlive, you can optimize the performance of your Vue 3 applications, resulting in faster and smoother user experiences. That being said, if you are looking to start a new Vue JS project and need help with how to structure your project, feel free to check out our Vue JS starter.dev GitHub showcases, which showcase (no kidding) a mini-GitHub clone application built using Vue in different ways (e.g., using Nuxt, Quasar], Vite, etc.). Alternatively, if you are looking to start a new project without worrying about all the config required, you can check out the [Vue JS starter kit instead. Thanks for checking this out!...

Feb 24, 2023

4 mins

Vue

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Understanding the Difference Between :focus and :focus-visible in CSS I have learned my fair share about the importance of keyboard accessibility, so I know that visual indication of the focused element is very important. But the well-known :focus pseudo-class is not always the best fit for this job. That's where :focus-visible comes in. Let's look at the differences between these two pseudo-classes and explore the best practices for using them effectively. What is the :focus Pseudo-Class? The :focus pseudo-class is a CSS selector that applies styles to any element that receives focus, regardless of how that focus was triggered. This includes focus events from keyboard navigation, mouse clicks, and touch interactions. Example Usage of :focus ` In this example, the button will display a blue outline whenever it is focused, whether the user clicks on it with a mouse, taps it on a touchscreen, or navigates to it using the keyboard. What is the :focus-visible Pseudo-Class? The :focus-visible pseudo-class is more specialized. It only applies styles to an element when the browser determines that the focus should be visible. This typically occurs when the user navigates via the keyboard or assistive technologies rather than through mouse or touch input. Example Usage of :focus-visible ` Here, the button will only show a blue outline when focused through keyboard navigation or another input method that usually requires visible focus indicators. Key Differences Between :focus and :focus-visible :focus - Behavior: Applies to any element that receives focus, regardless of the input method. - Use Cases: Ensures that all interactions with the element are visually indicated, whether by mouse, keyboard, or touch. :focus-visible - Behavior: Applies styles only when the focus should be visible, such as using a keyboard or assistive technology. - Use Cases: Ideal for scenarios where you want to provide focus indicators only to keyboard and assistive technology users while avoiding unnecessary outlines for mouse and touch users, typically required by design. Accessibility Implications :focus - Pros: - Guarantees that all users can see when an element is focused, which is critical for accessibility. - Cons: - Can lead to a suboptimal experience for mouse users, as focus styles may appear unnecessarily during mouse interactions. :focus-visible - Pros: - Enhances user experience by showing focus indicators only when necessary, thus keeping the interface clean for mouse and touch users. - Tailors the experience for keyboard and assistive technology users, providing them with clear visual cues. - Cons: - Additional considerations may be required to ensure that focus indicators are not accidentally omitted, especially in older browsers that do not support :focus-visible. - There may be cases where you want to show focus indicators for all users, regardless of input method. Best Practices for Using :focus and :focus-visible To achieve the best accessibility and user experience, combining both :focus and :focus-visible in your CSS is often a good idea. Combining :focus and :focus-visible ` Here is a Stackblitz example of what such styling could look like for you to try out and play with. Additional Tips - Test with Keyboard and Assistive Technology: Ensure that your web application is navigable using a keyboard (Tab, Shift + Tab, etc.) and that focus indicators are visible for those who rely on them. It's never a bad idea to include accessibility testing in your e2e testing suite. - Provide Clear Focus Indicators: Make sure that focus indicators are prominent and easy to see. A subtle or hard-to-spot focus indicator can severely impact accessibility for users who rely on keyboard navigation. Conclusion The :focus-visible pseudo-class offers a more refined way to manage focus indicators, improving accessibility and user experience, particularly for keyboard and assistive technology users. By understanding the differences between :focus and :focus-visible, and applying best practices in your CSS, you can create more accessible and user-friendly web applications. Remember, accessibility should never be an afterthought. By thoughtfully applying focus styles, you ensure that all users, regardless of how they interact with your site, can easily navigate and interact....

Nov 8, 2024

3 mins

AccessibilityCSSPlaywright

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Nuxt 3 Demo App with Prerender and SSR

Introduction

Server Side Rendering in Nuxt 3

Enhancing User Experience and SEO with SSR

The Power of SSR in Nuxt 3

Pre-rendering in Nuxt 3

Amplifying Application Performance with Pre-rendering

Leverage Pre-rendering with Nuxt 3

Going beyond with Nuxt 3

Conclusion

Allan M. Jeremy

You might also like

How to Style Using SCSS in Nuxt

Announcing Our New Starter.dev Kit: Nuxt 3 with Pinia and Vuetify

Improving the Performance of Vue 3 Applications Using v-memo and KeepAlive

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Let's innovate together!

You might also like

How to Style Using SCSS in Nuxt

Announcing Our New Starter.dev Kit: Nuxt 3 with Pinia and Vuetify

Improving the Performance of Vue 3 Applications Using v-memo and KeepAlive

Understanding the Difference Between `:focus` and `:focus-visible` in CSS