.svg){kind=icon}
Uniform blog/Uniform is Nuxt 3 ready
Uniform is Nuxt 3 ready
Uniform is Nuxt 3 ready
We are excited to announce that the latest iteration of the Uniform SDK is fully compatible with Vue 3 and Nuxt 3.
Nuxt 3 is fast approaching GA. To ensure that Vue.js enthusiasts can build next-generation web experiences with the awesome features offered by Nuxt 3, our new SDK fully supports all Uniform capabilities: from no-code presentation management by Uniform Canvas, complete with web-socket-based live previews, to edge-side personalization and A/B testing through Uniform Context.
With the Nuxt 3 Nitro engine, developers can now run an entire site on the edge or combine personalization on the edge with delivery of the remaining content in SSG mode through a CDN. Even for highly dynamic pages, the latter choice results in blazing-fast page loads. We’re talking sub 50 milliseconds!
Nuxt 3 is truly game changing, and Uniform takes full advantage of that with an easy-to-install SDK that follows Nuxt’s no-config ethos.
Getting started with Uniform Nuxt 3 module
Install the dependencies:
1npm install @uniformdev/uniform-nuxt @uniformdev/canvas
2@uniformdev/canvas-vue @uniformdev/context @uniformdev/context-vueConfigure the module:
1import { defineNuxtConfig } from "nuxt";
2
3export default defineNuxtConfig({
4 modules: ["@uniformdev/uniform-nuxt"],
5 uniform: {
6 projectId: process.env.UNIFORM_PROJECT_ID,
7 readOnlyApiKey: process.env.UNIFORM_API_KEY,
8 },
9})app.vueClick to copy (or [[slug]].vue)Click to copy, and you’re done:1<script lang="ts" setup>
2 const { $useComposition } = useNuxtApp();
3 const { data } = await $useComposition({ slug: "/about" });
4 const composition = computed(() => data.value?.composition);
5</script>1<template>
2 <Composition v-if="composition" :data="composition">
3 <SlotContent name="content" />
4 </Composition>
5</template>Features of Uniform’s Nuxt 3 module
This is what the module can do:
- Auto-registers the required Uniform components.
- Auto-creates a Uniform Canvas client.
- Creates a Uniform Context instance (for personalization) and makes it available throughout the app without the need for a wrapping component.
- Builds a handy
$useCompositionClick to copycomposable on top of Nuxt's useAsyncData. - Displays live previews seamlessly.
- Monitors query-string changes, which Nuxt doesn't do by default.
Benefits of using Uniform with Nuxt 3
As a rule, no single system offers all the functionalities you need for an app. Instead, multiple systems must work together for the app to run smoothly. A composable architecture is one in which you can pick and choose the components for your technology stack, but getting them to work together well can be challenging.
Modern headless systems can connect with other systems as part of a composable architecture. However, using some composable services doesn’t give you a full composable architecture.
Real composability means that you can add or remove components easily as your needs evolve. That’s what Uniform offers. With Uniform’s composition layer, you can build and maintain a modern stack with composable services without tightly coupling them. As a result, developers, content creators, and marketers alike can create and deliver experiences quickly, independently and without vendor lock-in.
- Developers can add or change services any time, assured that their tools will work well together without the need for time-consuming and expensive replatforming and reintegration.
- Content creators can build engaging experiences with a consistent, no-code approach through which they can readily leverage all the tools in their stack.
- Marketers can promote conversions through intent-based personalization and experimentation mechanisms that integrate with customer data and that are simple and intuitive for implementation by developers.
- As internal needs or consumer tastes change, the organization can be agile enough to meet these challenges, without extensive background work that doesn’t deliver direct value to end users.
Next Steps
Want to try out all the new Vue and Nuxt goodies?
- Check out our tutorial (select Nuxt 3) or documentation.
- Find a more complete example on GitHub.
- Schedule a free demo and, to talk more, join us at our Discord server.
