Creating Dynamic UI with Nuxt UI and Vue 2026

In this tutorial, we will explore how to create dynamic user interfaces using Nuxt UI and Vue 2026. As web applications become more complex, leveraging modern frameworks like Nuxt and Vue can significantly enhance the development process. Nuxt UI, a component library for Vue 2026, simplifies building interactive and responsive UIs. This tutorial will guide you through setting up a project, understanding the structure, and implementing dynamic components.

Prerequisites

Before we begin, ensure you have the following installed on your machine:

• Node.js (version 18 or later)
• npm (version 9 or later)
• Vue CLI

You can install Node.js and npm from the official website. Once Node.js is installed, you can install Vue CLI globally using npm:

npm install -g @vue/cli

Additionally, you should have a basic understanding of JavaScript, Vue.js, and Nuxt.js.

Project Structure

Let's start by creating a new Nuxt project. Open your terminal and run the following commands:

npx create-nuxt-app nuxt-dynamic-ui
cd nuxt-dynamic-ui

This will scaffold a new Nuxt project with the following directory structure:

nuxt-dynamic-ui/
├── assets/
├── components/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── static/
├── store/
├── nuxt.config.js
└── package.json

Each directory serves a specific purpose. For instance, components/ is where you'll store your Vue components, pages/ contains the page components that Nuxt will automatically route, and layouts/ is used for layout components that wrap around your pages.

Step 1: Setting Up Nuxt UI

Nuxt UI is a component library that complements Vue 2026 by providing pre-built components. To add Nuxt UI to your project, install it via npm:

npm install @nuxt/ui

Next, register Nuxt UI in your nuxt.config.js:

// nuxt.config.js
export default {
  modules: [
    '@nuxt/ui'
  ],
}

This configuration allows you to use Nuxt UI components throughout your project.

Step 2: Creating a Basic Component

Let's create a simple Vue component using Nuxt UI. Navigate to the components/ directory and create a new file named HelloWorld.vue:

<!-- components/HelloWorld.vue -->
<template>
  <div class="hello">
    <nuxt-button @click="handleClick">Click Me!</nuxt-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Hello, Nuxt UI!');
    }
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 20px;
}
</style>

In this component, we use the <nuxt-button> component from Nuxt UI. When the button is clicked, it triggers the handleClick method, displaying an alert.

Step 3: Displaying the Component on a Page

To see the HelloWorld.vue component in action, we need to include it in one of our pages. Open the pages/index.vue file:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Welcome to Nuxt Dynamic UI</h1>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '~/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
h1 {
  text-align: center;
  margin-top: 40px;
}
</style>

Here, we import the HelloWorld component and include it in the index page. When you run the application, navigate to the home page to see the button in action.

To start the development server, run:

npm run dev

Visit http://localhost:3000 in your browser. You should see a welcome message and a button that triggers an alert when clicked.

In these initial steps, we have set up a basic Nuxt project, integrated Nuxt UI, created a simple interactive component, and displayed it on a page. This foundation allows us to build more complex dynamic UIs in the following steps.

## Step 4: Adding Dynamic Data with Vuex

To make our application more dynamic, we can manage state using Vuex. Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application.

First, let's set up Vuex in our project. Open the `store/index.js` file and add the following code:

```javascript
// store/index.js
export const state = () => ({
  message: 'Hello, Nuxt UI!'
})

export const mutations = {
  updateMessage(state, newMessage) {
    state.message = newMessage
  }
}

export const actions = {
  changeMessage({ commit }) {
    commit('updateMessage', 'Nuxt UI is awesome!')
  }
}

In this store, we define a message state, a mutation to update the message, and an action to commit the mutation. This setup allows us to change the message dynamically.

Next, modify the HelloWorld.vue component to use Vuex:

<!-- components/HelloWorld.vue -->
<template>
  <div class="hello">
    <nuxt-button @click="changeMessage">Click Me!</nuxt-button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['changeMessage'])
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 20px;
}
</style>

Here, we use mapState to map the message state to a computed property and mapActions to map the changeMessage action to a method. The paragraph element displays the message, which updates when the button is clicked.

Step 5: Styling with Nuxt UI

Nuxt UI comes with a set of utility classes that can be used for styling. Let's enhance the appearance of our application using these utilities.

Update the HelloWorld.vue component to include some Nuxt UI classes:

<!-- components/HelloWorld.vue -->
<template>
  <div class="hello">
    <nuxt-button class="nuxt-btn-primary" @click="changeMessage">Click Me!</nuxt-button>
    <p class="nuxt-text-lg">{{ message }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['changeMessage'])
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 20px;
}
</style>

The nuxt-btn-primary and nuxt-text-lg classes provide a primary button style and larger text size, respectively.

Complete Working Example

Here is the complete code for the project:

nuxt.config.js

export default {
  modules: [
    '@nuxt/ui'
  ],
}

store/index.js

export const state = () => ({
  message: 'Hello, Nuxt UI!'
})

export const mutations = {
  updateMessage(state, newMessage) {
    state.message = newMessage
  }
}

export const actions = {
  changeMessage({ commit }) {
    commit('updateMessage', 'Nuxt UI is awesome!')
  }
}

components/HelloWorld.vue

<template>
  <div class="hello">
    <nuxt-button class="nuxt-btn-primary" @click="changeMessage">Click Me!</nuxt-button>
    <p class="nuxt-text-lg">{{ message }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['changeMessage'])
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 20px;
}
</style>

pages/index.vue

<template>
  <div>
    <h1>Welcome to Nuxt Dynamic UI</h1>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '~/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
h1 {
  text-align: center;
  margin-top: 40px;
}
</style>

Common Errors and Fixes

1. Error: Vuex not initialized properly

   • Fix: Ensure that the store/index.js file is correctly set up with state, mutations, and actions.

2. Error: Component is not registered

   • Fix: Check that the component is imported and registered correctly in the pages/index.vue file.

3. Error: Nuxt UI components not styling as expected

   • Fix: Verify that Nuxt UI is correctly installed and imported in nuxt.config.js.

Conclusion

In this tutorial, we have built a dynamic UI using Nuxt UI and Vue 2026. We covered setting up a Nuxt project, integrating Nuxt UI, creating components, managing state with Vuex, and applying styles. This foundation allows you to create more complex applications with dynamic data and responsive designs.

Sources

• Node.js Official Website
• Nuxt.js Documentation
• Vuex Documentation
• Nuxt UI Documentation