Nuxt Component Viewer

Simple and fully dynamic single file alternative to Storyboard for Nuxt, accessable via /_components.

Demo: https://stackblitz.com/edit/nuxt-starter-uotxqv

Note: Experimental status.

Features

• Component viewer
• Localization (i18n)
• 100% Tailwind
• Fully dynamic
• Quick toggles for component/viewport
• Light/Dark mode
• Single page

Setup

Prerequisites:

• pnpm
• Nuxt
• TailwindCSS
• i18n (optional)
• Color mode (optional)

Minimal install guide

1. Create new nuxt project

pnpm dlx nuxi@latest init nuxt-project
cd nuxt-project

2. Install packages

pnpm install
pnpm add --save-dev @nuxtjs/tailwindcss

4. add tailwind as module to nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    "@nuxtjs/tailwindcss",
  ],
})

5. update .app to enable pages

<template>
  <div>
    <NuxtLayout>
      <NuxtPage  />
    </NuxtLayout>
  </div>
</template>

6. create /pages folder

7. create /pages/index.vue file with a link

<template>
    <div>
        <NuxtLink to="/_components/">Go to ComponentViewer</NuxtLink>
    </div>
</template>

8. copy the _components.vue file from this repo to /pages/_components.vue

9. create folder /layouts

10. create files /layouts/default.vueand /layouts/blank.vue with this template

<template>
    <div>
      <slot />
    </div>
  </template>

11. Create /components folder

12. Create component file /components/ButtonComponent.vue

<template>
    <button class="bg-blue-400 p-4 py-2 text-white rounded-xl">A nice button</button>
</template>

12. Start server

pnpm run dev

13. Navigate to http://localhost:3000/_components