CoreUI + Vue + Nuxt

This guide walks you through adding CoreUI for Vue.js to a Nuxt project.

Create a project

Scaffold a new Nuxt application with the official command and answer the prompts.

npm create nuxt@latest my-app
cd my-app

Install CoreUI

Install the Vue components together with the CSS library that styles them.

npm install @coreui/vue @coreui/coreui

npm install @coreui/vue-pro @coreui/coreui-pro

Import styles

Add the stylesheet to nuxt.config.ts so it loads for every route.

export default defineNuxtConfig({
  css: ['@coreui/coreui/dist/css/coreui.min.css'],
})

export default defineNuxtConfig({
  css: ['@coreui/coreui-pro/dist/css/coreui.min.css'],
})

Use components

Render your first CoreUI component in app/app.vue.

<template>
  <CButton theme="primary">Primary button</CButton>
</template>

<script setup lang="ts">
import { CButton } from '@coreui/vue'
</script>

<template>
  <CButton theme="primary">Primary button</CButton>
</template>

<script setup lang="ts">
import { CButton } from '@coreui/vue-pro'
</script>

Start the development server and open http://localhost:3000 to see the button rendered with CoreUI’s styles.

npm run dev