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.