v1.0

Changes and upgrade guide for v1.0.

Tony Zhang
@ZTL-UwU

✅ Upgrading (tl;dr)

If you want help upgrading, you can join the Discord Server and post in the 🔼・upgrade channel or DM me on Bluesky with a link to your project. I will do my best to answer questions / send PRs to help with the process.

🌀 Migrate to Tailwind v4

🚦 Impact Level: Significant

What Changed

shadcn-docs-nuxt now uses Tailwind v4, which is a major update to the Tailwind CSS framework. You will need to update your tailwind.css (follow the migration steps below). Apart from that, this update should be seamless for most users, but there are some breaking changes that you should be aware of:

  • If you are using tailwind in your custom components, you might need to update your code to use the new utility classes. (See the Tailwind v4 upgrade guide for a full list of changes.)

Migration Steps

Update the tailwind.css file at assets/css/tailwind.css to the following:

assets/css/tailwind.css
@import 'tailwindcss';

@config '../../tailwind.config.js';
/* If you are using shadcn-docs-nuxt in a monorepo, change the amount of .. to match the node_modules directory */
@source '../../node_modules/shadcn-docs-nuxt';

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@utility step {
  counter-increment: step;

  &:before {
    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
    @apply -ml-[50px] -mt-1;
    content: counter(step);
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border:214.3 31.8% 91.4%;
    --input:214.3 31.8% 91.4%;
    --ring:221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background:222.2 84% 4.9%;
    --foreground:210 40% 98%;

    --card:222.2 84% 4.9%;
    --card-foreground:210 40% 98%;

    --popover:222.2 84% 4.9%;
    --popover-foreground:210 40% 98%;

    --primary:217.2 91.2% 59.8%;
    --primary-foreground:222.2 47.4% 11.2%;

    --secondary:217.2 32.6% 17.5%;
    --secondary-foreground:210 40% 98%;

    --muted:217.2 32.6% 17.5%;
    --muted-foreground:215 20.2% 65.1%;

    --accent:217.2 32.6% 17.5%;
    --accent-foreground:210 40% 98%;

    --destructive:0 62.8% 30.6%;
    --destructive-foreground:210 40% 98%;

    --border:217.2 32.6% 17.5%;
    --input:217.2 32.6% 17.5%;
    --ring:224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
}

🌎 i18n Support

🚦 Impact Level: Medium

What Changed

shadcn-docs-nuxt now supports i18n out of the box, including the following features:

  • Content translation: You can now translate your content using the file structure. You can create a folder for each locale in the content folder, and the content will be automatically translated based on the locale.
  • UI translation: The UI is now fully translatable, including all the components and pages.
  • Language switcher: The language switcher is now fully functional and allows you to switch between languages easily.
  • Auto link generation: The links in the content automatically redirect to the correct locale. You don't have to specify the locale in the links. For example, if you have a link to /getting-started, it will automatically redirect to /fr/getting-started if the current locale is fr.

Usage Guide

Migration Steps

nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  extends: ['shadcn-docs-nuxt'],
  i18n: {     defaultLocale: 'en',     locales: [       {         code: 'en',         name: 'English',         language: 'en-US',       },     ],   },   compatibilityDate: '2024-07-06',
});

Set defaultLocale and locales in the i18n property to your preferred locale. This is used for the UI language. Even if you are not using i18n in your app, you still need to set the UI language here.

Currently supported UI locales are:

  • en (English)
  • fr (Français)
  • zh-CN (简体中文)
  • zh-TW (繁體中文)
  • ja (日本語)
  • km (ភាសាខ្មែរ)
  • ru (Русский)
  • ko (한국어)
  • hi (हिन्दी)
  • bn (বাংলা)

🧱 New Code Block Features

Transformers

console.log('hewwo'); console.log('hello'); console.log('goodbye');

console.log('No errors or warnings');
console.error('Error'); console.warn('Warning'); 
console.log('Not focused');
console.log('Focused'); console.log('Not focused');

Code Collapse

const parsedMeta = computed(() => {
  const split = meta?.split(' ') ?? [];
  const params = new Map<string, string | undefined>();

  for (const param of split) {
    const [key, val] = param.split('=');
    params.set(key, val);
  }

  return params;
});

🔠 Custom Fonts

You can now customize you font in tailwind.config.js file. shadcn-docs-nuxt uses @nuxt/fonts under the hood, so you can use any font you want.

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Geist'],
        mono: ['Geist Mono'],
      },
    },
  },
};

💅 Style Changes

  • New alert style
  • New code copy button style

🩹 Fixes

  • Navigation Menu viewport placement (#23)
  • 404 page size (095135b)
  • Aside font weight (29ab698)
  • Add legacy: true to useClipboard (7c56084)
  • Remove transpiles (108fb35)
Edit this page