Did you miss the Digital Experience Composition Assembly? You can still see all the excitement you missed out on.

Access the report now

Uniform has been named in the

2022 Gartner® Cool Vendors™ in Digital Commerce Report

A CMS is a software application that allows users to build and manage a website without the need for specialized technical knowledge.

There are many headless vendors to choose from and each have its own advantages. Compare the benefits of headless with Uniform.

How the top headless CMSes of 2023 measure up

Learn everything you need to know about effective content management and its individual processes and deployments.

Content management: a complete guide

Business success requires a solid yet streamlined and reliable content management process. Learn how to create one.

Content management process: what to know

How content management systems work, what benefits they offer, what to consider when evaluating your CMS options, and how to streamline content management.

What is a CMS? Everything you need to know

The challenges of migrating from one content management system (CMS) to another and the five simple steps to take for a smooth process.

How to migrate a CMS

Learn what a headless content management system (CMS) is and how it works in today's ecosystem.

What is a headless CMS?

Headless CMSes are the future of omnichannel content delivery. Learn their top five benefits.

Top five headless CMS benefits

Choosing the right headless CMS for your website takes research. Our complete guide has the info you need.

How to a choose a headless CMS: a complete guide

Content management system (CMS)

What content modeling is and how it helps your teams create, manage, and scale digital experiences, in particular with Uniform DXCP.

What content modeling is and how it helps your teams create, manage, and scale digital experiences, in particular with Uniform.

What is content modeling?

Composable systems are built upon multiple data sources to orchestrate a single source of truth. Uniform DXCP platform aligns those sources with teams.

The importance of a single source of truth

Scalable content is critical for expanding digital presence. Learn how to reach more customers through scalable content and remove blockers with Uniform.

Five tips for ensuring scalable content

Templates for content models, a robust, logic-based structure that promotes scalability.

How to build a content model with examples

How to build a strategy for evergreen or reusable content that boosts site traffic while growing your site’s value and your business.

Creating an effective content strategy

Build content pillars to organize your site, enhance its readability, and bolster your business strategy.

A complete guide to content pillars

Learn nine best practices for content modeling to bolster your marketing strategy. 

Nine best practices for content modeling

Content modeling

Mesh

Canvas

Context

What is DXCP?

Pricing

Customers

Partners 

Platform

Contentful

Contentstack

Kontent.ai

GatherContent

Prismic

Salesforce CMS

Sanity

Sitecore

Umbraco Heartcore

BigCommerce

commercetools

Algolia

Integrations

Blog

Developer how-tos 

Resources

Uniform Platform Docs

Uniform for Sitecore Docs

FAQs

Learn

About us

Contact us

Careers

Company

Request a free demo

How Uniform unlocks business teams

How Uniform accelerates developers

What's New?

Log in

Sign up

Components in apps are building blocks that perform related functions that are pluggable and reusable. Popular frameworks have all adopted the component way as an effective approach.<a href="https://tailwindui.com/">Tailwind</a><a href="https://tailwindui.com/">UI</a> is a collection of well-designed components and templates ideal for building websites and apps. This tutorial, whose source code is on <a href="https://stackblitz.com/edit/github-anehxu?embed=1&file=app.vue">GitHub</a>, describes how to create a component library with TailwindUI and Uniform in Nuxt 3 in the <a href="https://stackblitz.com/edit/github-anehxu">StackBlitz</a> IDE, which you can leverage with this codeline:<code>&lt;iframe src=&quot;https://stackblitz.com/edit/github-anehxu?embed=1&amp;file=app.vue&quot;&gt;&lt;/iframe&gt;</code><h2>Understanding the prerequisites</h2>To fully grasp the concepts in this tutorial, you must have—<ul><li>A basic understanding of Vue and Nuxt</li><li>A fundamental knowledge of Tailwind CSS</li><li>A <a href="https://uniform.dev/">Uniform</a> account, which you can <a href="https://uniform.app/?signup=true">create for free</a>.</li></ul><blockquote>
<a href="https://uniform.dev/">Uniform</a> offers <a href="https://uniform.dev/blogs/digital-experience-composition-dxc/explaining-dxc-and-its-benefits-to-marketers">digital experience composition (DXC)</a> features with which you can create, deliver, and manage building blocks for apps. Instead of making multiple API requests, you can employ Jamstack technologies, such as headless content-management systems, commerce APIs, and CDNs, and deliver digital experiences as a single source of truth.</blockquote><h2>Getting started</h2>First, create a Nuxt 3 starter project by typing this command in a directory of your choice:

<code>npx nuxi init uniform-nuxt &amp;&amp; cd uniform-nuxt
</code>In the project directory, install the project dependencies:
<code>npm i </code><h2>Adding TailwindCSS support</h2>Next, install and configure TailwindCSS, a prerequisite for TailwindUI, in your app. Follow these steps:
<ol><li>Install Tailwind CSS and its dependencies. Type
<code>npm install -D tailwindcss postcss@latest autoprefixer@latest @nuxt/postcss8
npx tailwindcss init

</code>The above command line also creates a <code>tailwind.config.js</code> file for configuring Tailwind CSS. </li><li>Add the paths to the template files to the <code>tailwind.config.js</code> file, like this:
<code> /** @type {import(&#39;tailwindcss&#39;).Config} */
module.exports = {
 content: [
 &#39;./components/**/*.{js,vue,ts}&#39;,
 &#39;./layouts/**/*.vue&#39;,
 &#39;./pages/**/*.vue&#39;,
 &#39;./**/*.vue&#39;,
 &#39;./plugins/**/*.{js,ts}&#39;,
 ],
 theme: {
 extend: {},
 },
 plugins: [],
};</code></li><li>Create an <code>assets/css/tailwind.css</code> file in the root directory and add Tailwind CSS directives:
<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></li><li>Add the Tailwind CSS dependencies and the newly created style to configure Nuxt 3 by updating the <code>nuxt.config.js</code> file with the code below:
<code>import { defineNuxtConfig } from &#39;nuxt&#39;;</code><code>// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
 build: {
 postcss: {
 postcssOptions: {
 plugins: {
 tailwindcss: {},
 autoprefixer: {},
 },
 },
 },
 },
 css: [&#39;~/assets/css/tailwind.css&#39;]
});</code></li></ol><h2>Adding TailwindUI</h2>Now add Tailwind UI to your app:<ol><li>Install the required dependencies:

<code>npm install @headlessui/vue @heroicons/vue</code></li><li>Update the <code>app.vue </code>file with this code:
<code>&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;
&lt;template&gt;
 &lt;div class=&quot;py-12 bg-white&quot;&gt;
 &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
 &lt;div class=&quot;lg:text-center&quot;&gt;
 &lt;h2 class=&quot;text-base text-indigo-600 font-semibold tracking-wide uppercase&quot;&gt;Transactions&lt;/h2&gt;
 &lt;p class=&quot;mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl&quot;&gt;A better way to send money&lt;/p&gt;
 &lt;p class=&quot;mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto&quot;&gt;Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class=&quot;mt-10&quot;&gt;
 &lt;dl class=&quot;space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10&quot;&gt;
 &lt;div v-for=&quot;feature in features&quot; :key=&quot;feature.name&quot; class=&quot;relative&quot;&gt;
 &lt;dt&gt;
 &lt;div class=&quot;absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white&quot;&gt;
 &lt;component :is=&quot;feature.icon&quot; class=&quot;h-6 w-6&quot; aria-hidden=&quot;true&quot; /&gt;
 &lt;/div&gt;
 &lt;p class=&quot;ml-16 text-lg leading-6 font-medium text-gray-900&quot;&gt;{{ feature.name }}&lt;/p&gt;
 &lt;/dt&gt;
 &lt;dd class=&quot;mt-2 ml-16 text-base text-gray-500&quot;&gt;
 {{ feature.description }}
 &lt;/dd&gt;
 &lt;/div&gt;
 &lt;/dl&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { AnnotationIcon, GlobeAltIcon, LightningBoltIcon, ScaleIcon } from &#39;@heroicons/vue/outline&#39;
const features = [
 {
 name: &#39;Competitive exchange rates&#39;,
 description:
 &#39;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.&#39;,
 icon: GlobeAltIcon,
 },
 {
 name: &#39;No hidden fees&#39;,
 description:
 &#39;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.&#39;,
 icon: ScaleIcon,
 },
 {
 name: &#39;Transfers are instant&#39;,
 description:
 &#39;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.&#39;,
 icon: LightningBoltIcon,
 },
 {
 name: &#39;Mobile notifications&#39;,
 description:
 &#39;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.&#39;,
 icon: AnnotationIcon,
 },
]
&lt;/script&gt;
</code></li></ol><blockquote>Note: Tailwind UI comes with free and paid templates. The template in this tutorial is a free marketing template.</blockquote><ol><li>Finally, start a development server:

<code>npm run dev 
</code></li></ol><h2>Putting it all together on Uniform</h2>Now create a component library on Uniform.<ol><li>Log in to your Uniform account and click Create New Project at the top. Type <code>marketing_feature</code> under Give your project a name and click Continue.
</li><li>Click the Security tab at the top, then API Keys, and then the + icon to create an API key. Input <code>marketing_feature</code> as the API name, click Add to Project, select all the permissions, and click Set Permissions. Finally, click Create API Key.
</li></ol>A screen that contains your API Key and Project ID is then displayed.Before closing the screen, create a <code>.env</code> file in your app’s root directory and add this code snippet to the file:
<code>NUXT_ENV_API_KEY=/REPLACE WITH API KEY/
NUXT_ENV_PROJECT_ID=/REPLACE WITH PROJECT ID/</code><code></code><h2>Understanding and setting up components and compositions on Uniform</h2>Components in Uniform apps work similarly to those in Vue apps, i.e., you can break up an app into smaller, reusable building blocks with properties. A composition contains one or more components. For this project, create a single <code>header_component</code> and four instances of <code>body_component</code>.Follow these steps:1. Click the Projects tab at the top and then the project. Afterwards, click the Canvas tab at the top, then Component Library, and the + icon.<table><tr><th>Parameter Name</th><th>Help Text</th><th>Type</th><th>Required?</th></tr><tr><td>mini title</td><td>Mini title</td><td>Text</td><td>Yes</td></tr><tr><td>main title</td><td>Main title</td><td>Text</td><td>Yes</td></tr><tr><td>description</td><td>Description</td><td>Text</td><td>Yes</td></tr></table>2. Type <code>header_component</code> as the component name, add the properties of <code>mini title</code>, <code>main title</code>, and <code>description</code> as shown above, and then click OK.3. Click Save and Close.Similarly, create a <code>body_component</code> component with these properties:<table><tr><th>Parameter Name</th><th>Help Text</th><th>Type</th><th>Required?</th></tr><tr><td>title</td><td>Title</td><td>Text</td><td>Yes</td></tr><tr><td>description</td><td>Description</td><td>Text</td><td>Yes</td></tr></table>Be sure to click Save and Close.<code>header_component</code> and <code>body_component</code> now serve as the blueprints or building blocks for your marketing landing page. Create that page with the following steps:<ol><li>Click the + icon, type <code>Page</code> under Component Name, and select Composition Component. Afterwards, click Slots below and click the + icon to create a slot.
<blockquote>Note: With slots, you can create component instances (a total of five in this tutorial), which can accept data dynamically.</blockquote></li><li>Type <code>Items</code> under Slot Name, <code>0</code> under Minimum, <code>5</code> under Maximum (the header section and the four body sections), and select <code>body_component</code> and <code>header_component</code> under Allowed Components. Click OK.
</li><li>Finally, click Save and Close.</li></ol>You can now build your marketing landing page with the <code>Pages</code> component. Do the following:<ol><li>Click Compositions on the left and then the + icon to create a composition. 
</li><li>Select <code>Page</code> as the composition type, input <code>Homepage</code> as the name, and click Create.</li><li>Type <code>items</code> under Slug and click the + icon to add a component to map out a new component.
<blockquote>Note: The slug you added will come in handy for composition searches.</blockquote></li><li>Select <code>header_component</code> and add the corresponding text under <code>mini title</code>, <code>main title</code>, and <code>description</code> as hard-coded in your Nuxt 3 app.
</li><li>Repeat the above steps to add the remaining <code>body_component</code> data and then click Save and Publish.
</li><li>Navigate back to the Canvas tab and click Publish to make your composition available to third-party apps.
</li></ol><h2>Integrating Uniform with Nuxt 3</h2>To integrate Uniform with Nuxt 3:<ol><li>Install the required dependencies with this command:
<code>npm install @uniformdev/canvas @uniformdev/context @uniformdev/canvas-vue @uniformdev/context-vue @uniformdev/uniform-nuxt</code> </li><li>Configure and register Uniform as a module in your Nuxt 3 app by editing the <code>nuxt.config.ts</code> file to read as follows:

<code>import { defineNuxtConfig } from &#39;nuxt&#39;;</code><code>// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
 build: {
 postcss: {
 postcssOptions: {
 plugins: {
 tailwindcss: {},
 autoprefixer: {},
 },
 },
 },
 },
 css: [&#39;~/assets/css/tailwind.css&#39;],
 //add below section
 modules: [&#39;@uniformdev/uniform-nuxt&#39;],
 uniform: {
 projectId: process.env.NUXT_ENV_PROJECT_ID,
 readOnlyApiKey: process.env.NUXT_ENV_API_KEY,
 },
});</code></li><li>Retrieve your data with an API call through the configured Uniform module by editing the <code>app.vue</code> file to read like this:

<code>&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;
&lt;template&gt;
 &lt;Composition v-if=&quot;composition&quot; :data=&quot;composition&quot;&gt;
 &lt;div class=&quot;py-12 bg-white&quot;&gt;
 &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
 &lt;div class=&quot;lg:text-center&quot;&gt;
 &lt;h2
 class=&quot;text-base text-indigo-600 font-semibold tracking-wide uppercase&quot;
 &gt;{{composition.slots.items[0].parameters.miniTitle.value}}&lt;/h2&gt;
 &lt;p
 class=&quot;mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl&quot;
 &gt;{{composition.slots.items[0].parameters.mainTitle.value}}&lt;/p&gt;
 &lt;p
 class=&quot;mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto&quot;
 &gt;{{composition.slots.items[0].parameters.description.value}}&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class=&quot;mt-10&quot;&gt;
 &lt;dl class=&quot;space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10&quot;&gt;
 &lt;div
 v-for=&quot;(feature, i) in composition.slots.items.slice(1)&quot;
 :key=&quot;feature.name&quot;
 class=&quot;relative&quot;
 &gt;
 &lt;dt&gt;
 &lt;div
 class=&quot;absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white&quot;
 &gt;
 &lt;component :is=&quot;iconArray[i]&quot; class=&quot;h-6 w-6&quot; aria-hidden=&quot;true&quot; /&gt;
 &lt;/div&gt;
 &lt;p
 class=&quot;ml-16 text-lg leading-6 font-medium text-gray-900&quot;
 &gt;{{ feature.parameters.title.value }}&lt;/p&gt;
 &lt;/dt&gt;
 &lt;dd
 class=&quot;mt-2 ml-16 text-base text-gray-500&quot;
 &gt;{{ feature.parameters.description.value }}&lt;/dd&gt;
 &lt;/div&gt;
 &lt;/dl&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/Composition&gt;
&lt;/template&gt;
&lt;script setup&gt;
import {
 AnnotationIcon,
 GlobeAltIcon,
 LightningBoltIcon,
 ScaleIcon
} from &quot;@heroicons/vue/outline&quot;;
const iconArray = [AnnotationIcon, GlobeAltIcon, LightningBoltIcon, ScaleIcon];
const { $useComposition } = useNuxtApp();
const { data: compositionData } = await $useComposition({ slug: &quot;items&quot; });
const composition = computed(() =&gt; compositionData.value.composition);
&lt;/script&gt;</code></li></ol>The snippet above does the following:<ol><li>Creates an <code>iconArray</code> array to store the icons.</li><li>Retrieves data from Uniform with the <code>$useComposition</code> instance by passing on the <code>items</code> slug you configured on Uniform earlier.</li><li>Creates a <code>composition</code> variable to hold the composition retrieved from Uniform.</li><li>Performs a conditional check: If <code>composition</code> is not empty, dynamically update the UI with the <code>composition</code> component.</li></ol>Now you can restart your development server. Type:

<code>npm run dev</code>
<h2>Configuring Live Previews</h2>Uniform’s intuitive UI enables developers to preview changes in realtime and avoid context switching between the platform and the codebase. To set up live previews:<ol><li>Click the Settings tab followed by Canvas, and then input the development URL <code>http://localhost:3000/?preview=true</code>. Click Save.
<blockquote>Note: For deployed apps, be sure to input the correct URL. For example, input <code>https://myapp.com/?preview=true</code> for the app <code>https://myapp.com</code>.</blockquote></li><li>Navigate back to the Canvas tab and click Homepage composition. The Preview button is displayed on the top-right corner.
To test the live-preview capability and see changes in real time, edit a component, save it, and click Preview.</li></ol><h2>Exploring other resources</h2>You’ve now learned how to create a component library with TailwindUI and Uniform in Nuxt 3. Besides enhancing the digital experience and raisingapp performance with only a single API call, Uniform also shortens time tomarket by offering developers and nondevelopers a seamless and intuitive UI for content edits.Here are a few helpful resources:<ul><li><a href="https://docs.uniform.app/getting-started">Uniform documentation</a></li><li><a href="https://www.npmjs.com/package/@uniformdev/canvas">Uniform Canvas</a></li><li><a href="https://tailwindui.com/">Tailwind UI
</a></li></ul>

Creating pluggable and reusable components with Tailwind UI and Uniform Canvas in Nuxt 3 in a few simple steps.

Build a Component Library with Tailwind UI and Nuxt 3

Uniform Informed: Create a component library with TailwindUI and Uniform in Nuxt 3


How to build personalized websites with the Uniform DXC Platform.

Building websites with Uniform: a beginner's guide

A step-by-step tutorial for personalizing website content with Uniform and Netlify Edge Functions.

Personalizing website content with Uniform and Netlify Edge Functions

How to create shoppable videos, which enhance the purchasing experience and grow revenue, with Cloudinary, BigCommerce, and Uniform.