くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt3 > Nuxt Studioにあるドキュメントサイトの3つテーマをのぞいてみる(Apline/Docus/Content Wind)

Nuxt Studioにあるドキュメントサイトの3つテーマをのぞいてみる(Apline/Docus/Content Wind)

Nuxt3 Nuxt-Content Docus

Explore themes · Nuxt Studioに掲載されている
ドキュメントサイトを作るテーマが3つあったので、
少しみてみたときの備忘録(*´ω｀*)

ざっくりまとめ

基本構成

  • サイトの設定 ... app.config.ts (theme独自 + )
  • デザインの設定 ... tokens.config.ts (pinceauベース)
  • コンポーネントのカスタマイズは、同じディレクトリ/ファイルで上書き可能
    • .nuxt/components.d.tsを見ると、自分のパスになっている。

基本的なディレクトリ構成は同じ

doc-site/
├── content/         ... Markdownファイル
├── public/          ... 画像などのstatic assset
├── app.config.ts    ... テーマの設定
├── tokens.config.ts ... デザイントークンの設定
├── nuxt.config.ts
├── package.json
└── tsconfig.json

各テーマの構成もこんな感じでNuxtの構成と一緒。
どんなコンポーネント、レイアウト、設定があるかは、
ここを見ると詳しくわかるかも。

doc-theme/
├── assets/          ... cssなど
├── components/      ... コンポーネントの一覧
│   └── content/
├── composables/     ... composables
├── layouts/         ... layout
├── app.vue
├── app.config.ts    ... テーマの設定のデフォルト
├── nuxt.schema.ts   ... テーマの設定の型定義
├── tokens.config.ts ... デザイントークンのデフォルト
├── nuxt.config.ts
└── tsconfig.json

使われているライブラリもだいたい同じ感じ。

Apline

Docus

Content Wind

各Themeの中身

Apline

Aplineテーマ自体が使ってるライブラリ

"dependencies": {
  "@nuxt-themes/elements": "^0.9.4", // UIコンポーネント。非公開リポジトリ？
  "@nuxt-themes/tokens": "^1.9.1", // 
  "@nuxt-themes/typography": "^0.11.0",
  "@nuxt/content": "^2.7.0",
  "@nuxthq/studio": "^0.13.3",
  "@vueuse/core": "^10.2.1",
  "ufo": "^1.1.2"
},

Aplineテーマが提供しているcomponentsやlayoutsなど

$ tree alpine-theme/ --dirsfirst -I node_modules
# Alpine Theme
# https://github.com/nuxt-themes/alpine
alpine/
├── assets
│   └── main.css
├── components
│   ├── content
│   │   ├── ArticlesList.vue
│   │   ├── ArticlesListItem.vue
│   │   ├── ContactForm.vue
│   │   ├── Gallery.vue
│   │   └── Hero.vue
│   ├── data-entry
│   │   └── Input.vue
│   ├── AppFooter.vue
│   ├── AppHeader.vue
│   ├── AppLayout.vue
│   ├── AppLoadingBar.vue
│   ├── Button.vue
│   ├── ColorModeSwitch.vue
│   ├── DocumentDrivenNotFound.vue
│   ├── MainNav.vue
│   └── SocialIcons.vue
├── composables
│   └── date.ts
├── layouts
│   ├── article.vue
│   ├── default.vue
│   └── page.vue
├── types
│   └── contact.ts
├── app.vue
├── app.config.ts    ... テーマの設定のデフォルト
├── nuxt.schema.ts   ... テーマの設定の型定義
├── tokens.config.ts ... デザイントークンのデフォルト
├── nuxt.config.ts
└── tsconfig.json

Docus

Docusテーマ自体が使ってるライブラリ

"dependencies": {
  "@nuxt-themes/elements": "^0.9.4",
  "@nuxt-themes/tokens": "^1.9.1",
  "@nuxt-themes/typography": "^0.11.0",
  "@nuxt/content": "^2.7.0",
  "@nuxthq/studio": "^0.13.4",
  "@vueuse/integrations": "^10.2.1",
  "@vueuse/nuxt": "^10.2.1",
  "focus-trap": "^7.5.2",
  "fuse.js": "^6.6.2"
},

Docusテーマが提供しているcomponentsやlayoutsなど

$ tree docus-theme/ --dirsfirst -I node_modules
docus-theme/
├── app                    ... Algoliaで検索用?
│   ├── integrations
│   │   └── docsearch.ts
│   ├── module.ts
│   └── router.options.ts
├── assets
│   └── css
│       └── main.css
├── components
│   ├── app
│   │   ├── AppFooter.vue
│   │   ├── AppHeader.vue
│   │   ├── AppHeaderDialog.vue
│   │   ├── AppHeaderLogo.vue
│   │   ├── AppHeaderNavigation.vue
│   │   ├── AppLayout.vue
│   │   ├── AppLoadingBar.vue
│   │   ├── AppSearch.vue
│   │   ├── AppSocialIcons.vue
│   │   ├── DocumentDrivenNotFound.vue
│   │   ├── Ellipsis.vue
│   │   ├── Logo.vue
│   │   └── ThemeSelect.vue
│   └── docs
│       ├── DocsAside.vue
│       ├── DocsAsideTree.vue
│       ├── DocsPageBottom.vue
│       ├── DocsPageLayout.vue
│       ├── DocsPrevNext.vue
│       ├── DocsToc.vue
│       ├── DocsTocLinks.vue
│       ├── EditOnLink.vue
│       └── SourceLink.vue
├── composables
│   ├── useDocSearch.ts
│   ├── useDocus.ts
│   ├── useMenu.ts
│   └── useScrollspy.ts
├── layouts
│   ├── default.vue
│   └── page.vue
├── plugins
│   ├── menu.ts
│   └── scrollbars.client.ts
├── server
│   └── api
│       └── search.ts
├── app.vue
├── app.config.ts    ... テーマの設定のデフォルト
├── nuxt.schema.ts   ... テーマの設定の型定義
├── tokens.config.ts ... デザイントークンのデフォルト
├── nuxt.config.ts
├── package.json
└── tsconfig.json

"devDependencies": {
  "@nuxtjs/algolia": "^1.8.0",
  "@algolia/client-search": "^4.18.0",
  "@docsearch/css": "^3.5.1",
  "@docsearch/js": "^3.5.1",
},

Content Wind

Content Windテーマ自体が使ってるライブラリ

"dependencies": {
  "@nuxt-themes/elements": "^1.0.4",
  "@nuxt-themes/tokens": "^2.0.1",
  "@nuxt-themes/typography": "^1.0.0",
  "@nuxt/content": "^2.7.0",
  "@nuxtjs/color-mode": "^3.3.0",
  "@nuxtjs/tailwindcss": "^6.8.0",
  "nuxt-icon": "^0.4.2"
},

Content Windテーマが提供しているcomponentsやlayoutsなど

$ tree content-wind-theme/ --dirsfirst -I node_modules
content-wind-theme/
├── components
│   ├── content
│   │   └── MarkdownBlock.vue
│   ├── AppLayout.vue
│   ├── AppLoadingBar.vue
│   ├── AppNavbar.vue
│   └── ColorModeSwitch.vue
├── layouts
│   ├── default.vue
│   └── full-width.vue
├── app.vue
├── app.config.ts      ... テーマの設定のデフォルト
├── nuxt.schema.ts     ... テーマの設定の型定義
├── tokens.config.ts   ... デザイントークンのデフォルト
├── tailwind.config.ts ... Tailwindの設定
├── nuxt.config.ts
├── package.json
└── tsconfig.json

併用されているライブラリ

@nuxt-themes/tokens

"dependencies": {
  "@nuxtjs/color-mode": "^3.3.0",
  "@vueuse/core": "^10.2.0",
  "pinceau": "^0.19.1"
},
"devDependencies": {
  "style-value-types": "^5.1.2",
  "@nuxt-themes/typography": "^1.0.0",
  "@nuxt/content": "^2.7.0",
  "@vueuse/motion": "2.0.0",
  "nuxt-icon": "^0.4.1",
},

@nuxt-themes/typography

"dependencies": {
  "@nuxtjs/color-mode": "^3.2.0",
  "@vueuse/core": "^10.2.1",
  "nuxt-config-schema": "^0.4.6",
  "nuxt-icon": "^0.4.1",
  "pinceau": "^0.19.0",
  "ufo": "^1.1.2"
},
"devDependencies": {
  "@nuxt-themes/tokens": "^2.0.0",
  "@nuxt/content": "2.6.0",
},

@nuxt-themes/elements

リポジトリは見つけられなかったので、
node_modules/@nuxt-themes/elements配下をのぞいてみた。

$ tree "node_modules/@nuxt-themes/elements" --dirsfirst 
node_modules/@nuxt-themes/elements/
├── components
│   ├── globals
│   │   ├── Alert.vue
│   │   ├── Badge.vue
│   │   ├── ButtonLink.vue
│   │   ├── Callout.vue
│   │   ├── CodeBlock.vue
│   │   ├── CodeGroup.vue
│   │   ├── Container.vue
│   │   ├── CopyButton.vue
│   │   ├── Ellipsis.vue
│   │   ├── List.vue
│   │   ├── NuxtImg.vue
│   │   ├── Props.vue
│   │   ├── Sandbox.vue
│   │   ├── SourceLink.vue
│   │   ├── TabsHeader.vue
│   │   ├── Terminal.vue
│   │   └── VideoPlayer.vue
│   ├── icons
│   │   ├── IconCodeSandBox.vue
│   │   ├── IconDocus.vue
│   │   ├── IconNuxt.vue
│   │   ├── IconNuxtContent.vue
│   │   ├── IconNuxtLabs.vue
│   │   ├── IconNuxtStudio.vue
│   │   ├── IconStackBlitz.vue
│   │   └── IconVueTelescope.vue
│   ├── landing
│   │   ├── BlockHero.vue
│   │   ├── Card.vue
│   │   └── CardGrid.vue
│   ├── meta
│   │   ├── ComponentPlayground.vue
│   │   ├── ComponentPlaygroundData.vue
│   │   ├── ComponentPlaygroundProps.vue
│   │   ├── ComponentPlaygroundSlots.vue
│   │   ├── ComponentPlaygroundTokens.vue
│   │   ├── PreviewLayout.vue
│   │   └── TokensPlayground.vue
│   └── volta
│       └── VoltaBoard.vue
├── app.config.ts
├── nuxt.config.ts
├── package.json
└── tokens.config.ts

Nuxt Studio Theme Starter

テーマのStarterもあるっぽい？

Create a compatible Nuxt Studio theme with this GitHub template.

$ tree nuxt-themes-starter/ --dirsfirst
nuxt-themes-starter/
├── components
│   ├── content
│   │   └── HelloWorld.vue
│   └── AppLayout.vue
├── layouts
│   └── default.vue
├── app.vue
├── app.config.ts      ... テーマの設定のデフォルト
├── nuxt.schema.ts     ... テーマの設定の型定義
├── tokens.config.ts   ... デザイントークンのデフォルト
├── nuxt.config.ts
├── package.json
└── tsconfig.json

"dependencies": {
  "@nuxt/content": "^2.6.0",
  "pinceau": "^0.18.9",
  "@nuxthq/studio": "^0.13.2"
},
"devDependencies": {
  "@nuxt/eslint-config": "^0.1.1",
  "eslint": "^8.42.0",
  "nuxt": "^3.5.2",
  "typescript": "^5.1.3"
}

よく使いそうなモジュール

使われてないけど、これらもよく使いそう。
NuxtのModulesにあるものからpickup

ほかにも気になるやつ

以上!! Docusが一番リッチで汎用性がある感じ(*´ω｀*)