Nuxt-MobX-Shadcn-ts

Nuxt 4 project scaffold based on TypeScript 5, MobX 6 & Shadcn-Vue, which is inspired by Vue-MobX-Prime-ts.

Technology Stack

• Language: TypeScript 5 + ES Decorator (stage-3)
• Component engine: Vue 3
• Class decorator: Vue facing decorator 4
• Framework: Nuxt 4
• Component suite: Shadcn-Vue
• State management: MobX 6
• Markdown renderer: MDX 3

Features

MobX Integration

This scaffold uses the mobx-vue-helper package, which provides an @observer decorator that makes Vue components reactive to MobX observable state changes, similar to mobx-react. It supports both Class components and Function components.

Usage with Class Components

import { Vue, Component, toNative } from 'vue-facing-decorator';
import { observer } from 'mobx-vue-helper';

import counterStore from './models/Counter';

@Component
@observer
class MyMobX extends Vue {
  render() {
    return <button onClick={() => counterStore.increment()}>Count: {counterStore.count}</button>;
  }
}
export default toNative(MyMobX);

Usage with Function Components

import { observer } from 'mobx-vue-helper';

import counterStore from './models/Counter';

export const MyMobX = observer(() => (
  <button onClick={() => counterStore.increment()}>Count: {counterStore.count}</button>
));

MDX Dynamic Rendering

This scaffold demonstrates Server-Side Rendering of Markdown content using @mdx-js/mdx. The MDX content is evaluated during the SSR phase and custom components can replace default HTML elements.

import { evaluate } from '@mdx-js/mdx';
import * as runtime from 'vue/jsx-runtime';

import { Link } from './components/Link';

const { default: MDXContent } = await evaluate('# Some Markdown', runtime);

// Replace <a> tags with custom Link component
<MDXContent components={{ a: Link }} />;

Shadcn-Vue Integration

This scaffold is configured with Shadcn-Vue, a Vue port of shadcn/ui that provides beautifully designed components built with Radix Vue and Tailwind CSS.

Configuration

The project includes:

• components.json: Configuration file for the shadcn-vue CLI
• Tailwind CSS v4: Configured with design tokens in app/assets/css/main.css
• Utility function: app/lib/utils.ts with the cn helper for class merging
• Component location: UI components are located in app/components/ui/

Manage components

https://github.com/idea2app/ShadcnX

Using Components

Import and use Shadcn-Vue components in your TSX files:

import { Button } from "../components/ui/button";

// In your render method
<Button onClick={() => doSomething()}>Click me</Button>
<Button variant="outline">Outlined</Button>
<Button variant="ghost">Ghost</Button>

See the homepage (app/pages/index.tsx) for a working example.

Project Structure

app/
├── app.tsx              # App shell with navigation
├── assets/
│   └── css/
│       └── main.css     # Tailwind CSS configuration and theme
├── components/
│   ├── Link.tsx         # Custom link component for MDX
│   └── ui/              # Shadcn-Vue components
├── lib/
│   └── utils.ts         # Utility functions
├── models/
│   └── Counter.ts       # MobX counter store
├── pages/
│    ├── index.tsx       # Home page with MobX & Shadcn-Vue examples
│    └── MDX.tsx         # MDX dynamic rendering demo
└── plugins/             # Nuxt.js plugins
components.json          # Shadcn-Vue CLI configuration

Setup

Make sure to install dependencies:

# pnpm
pnpm install
# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# pnpm
pnpm dev
# bun
bun run dev

Production

Build the application for production:

# pnpm
pnpm build
# bun
bun run build

Locally preview production build:

# pnpm
pnpm preview
# bun
bun run preview

Deployment

Check out the Nuxt deployment documentation for more information.

Best Practices

1. Install GitHub apps in your organization or account:

   • Probot settings: set up Issue labels & Pull Request rules
   • PR badge: set up Online VS Code editor entries in Pull Request description

2. Click the Use this template button to create your own repository

3. Click the Open in GitHub codespaces button to start an online VS Code development environment immediately

4. Set Vercel variables as Repository secrets, then every commit will get an independent Preview URL

5. Recommend to add a Notification step in GitHub actions for your Team IM app

6. Remind the PMs & users to submit Feature/Enhancement requests or Bug reports with Issue forms

7. Collect all issues into Project kanbans, then create Pull requests with closes #issue_number in the description for automation

Recommended IDE setup

Use VS Code + TypeScript LSP + Prettier to enjoy the best Developer Experience, and get rid of loo...oow performance Vue official extension!!!