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:
Minimal install guide
- Create new nuxt project
pnpm dlx nuxi@latest init nuxt-project cd nuxt-project
- Install packages
pnpm install pnpm add --save-dev @nuxtjs/tailwindcss
- add tailwind as module to
nuxt.config.ts
export default defineNuxtConfig({ devtools: { enabled: true }, modules: [ "@nuxtjs/tailwindcss", ], })
- update
.app
to enable pages
<template> <div> <NuxtLayout> <NuxtPage /> </NuxtLayout> </div> </template>
- create
/pages
folder - create
/pages/index.vue
file with a link
<template> <div> <NuxtLink to="/_components/">Go to ComponentViewer</NuxtLink> </div> </template>
- copy the
_components.vue
file from this repo to/pages/_components.vue
- create folder
/layouts
- create files
/layouts/default.vue
and/layouts/blank.vue
with this template
<template> <div> <slot /> </div> </template>
- Create
/components
folder - 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>
- Start server
pnpm run dev
- Navigate to http://localhost:3000/_components