{
  "version": 1.1,
  "tags": [
    {
      "name": "template",
      "attributes": [
        {
          "name": "src",
          "description": {
            "kind": "markdown",
            "value": "`*.vue` コンポーネントを複数のファイルに分割したい場合は、`src` 属性を使用して言語ブロックに外部ファイルをインポートできます:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` でのインポートは webpack のモジュールリクエストと同じパス解決ルールに従うので注意してください。つまり:\n\n- 相対パスは `./` で始める必要があります\n- npm の依存関係からリソースをインポートできます:\n\n```vue\n<!-- インストール済みの \"todomvc-app-css\" npm パッケージからファイルをインポート -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` でのインポートは、カスタムブロックでも動作します。例:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\n`src` でエイリアスを使用する場合、モジュールリクエストとして解釈される `~` から始めないでください。これは、ノードモジュール内のアセットを参照できることを意味します:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
          },
          "references": "api/sfc-spec.html#src-imports"
        },
        {
          "name": "lang",
          "description": {
            "kind": "markdown",
            "value": "ブロックに `lang` 属性を使ってプリプロセッサーの言語を宣言できます。最も一般的なケースは、`<script>` ブロックでの TypeScript の使用です:\n\n```html\n<script lang=\"ts\">\n  // TypeScript を使う\n</script>\n```\n\n`lang` はどのブロックにも適用できます - 例えば、`<style>` で [Sass](https://sass-lang.com/) を使用したり、`<template>` で [Pug](https://pugjs.org/api/getting-started.html) を使用できます:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\nなお、各種プリプロセッサーとの統合はツールチェーンによって異なる場合があることに注意してください。例については、それぞれのドキュメントを参照してください:\n\n- [Vite](https://ja.vite.dev/guide/features.html#css-%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
          },
          "values": [
            {
              "name": "html"
            },
            {
              "name": "pug"
            }
          ],
          "references": "api/sfc-spec.html#pre-processors"
        }
      ],
      "description": {
        "kind": "markdown",
        "value": "\n- 各 `*.vue` ファイルには、最大 1 つのトップレベル `<template>` ブロックを含めることができます。\n\n- コンテンツは抽出されて `@vue/compiler-dom` に渡され、JavaScript のレンダー関数に事前コンパイルされ、エクスポートされたコンポーネントに `render` オプションとしてアタッチされます。\n"
      },
      "references": "api/sfc-spec.html#template"
    },
    {
      "name": "script",
      "attributes": [
        {
          "name": "src",
          "description": {
            "kind": "markdown",
            "value": "`*.vue` コンポーネントを複数のファイルに分割したい場合は、`src` 属性を使用して言語ブロックに外部ファイルをインポートできます:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` でのインポートは webpack のモジュールリクエストと同じパス解決ルールに従うので注意してください。つまり:\n\n- 相対パスは `./` で始める必要があります\n- npm の依存関係からリソースをインポートできます:\n\n```vue\n<!-- インストール済みの \"todomvc-app-css\" npm パッケージからファイルをインポート -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` でのインポートは、カスタムブロックでも動作します。例:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\n`src` でエイリアスを使用する場合、モジュールリクエストとして解釈される `~` から始めないでください。これは、ノードモジュール内のアセットを参照できることを意味します:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
          },
          "references": "api/sfc-spec.html#src-imports"
        },
        {
          "name": "lang",
          "description": {
            "kind": "markdown",
            "value": "ブロックに `lang` 属性を使ってプリプロセッサーの言語を宣言できます。最も一般的なケースは、`<script>` ブロックでの TypeScript の使用です:\n\n```html\n<script lang=\"ts\">\n  // TypeScript を使う\n</script>\n```\n\n`lang` はどのブロックにも適用できます - 例えば、`<style>` で [Sass](https://sass-lang.com/) を使用したり、`<template>` で [Pug](https://pugjs.org/api/getting-started.html) を使用できます:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\nなお、各種プリプロセッサーとの統合はツールチェーンによって異なる場合があることに注意してください。例については、それぞれのドキュメントを参照してください:\n\n- [Vite](https://ja.vite.dev/guide/features.html#css-%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
          },
          "values": [
            {
              "name": "ts"
            },
            {
              "name": "js"
            },
            {
              "name": "tsx"
            },
            {
              "name": "jsx"
            }
          ],
          "references": "api/sfc-spec.html#pre-processors"
        },
        {
          "name": "generic"
        },
        {
          "name": "setup",
          "valueSet": "v",
          "description": {
            "kind": "markdown",
            "value": "\n- 各 `*.vue` ファイルには、最大 1 つの `<script setup>` ブロックを含めることができます（通常の `<script>` は除く）。\n\n- スクリプトは前処理され、コンポーネントの `setup()` 関数として使用されます。これは、**コンポーネントの各インスタンスに対して**実行されることを意味します。`<script setup>` のトップレベルのバインディングは、自動的にテンプレートに公開されます。詳細は [`<script setup>` に関する専用のドキュメント](https://ja.vuejs.org/api/sfc-script-setup.html)を参照してください。\n"
          },
          "references": "api/sfc-spec.html#script-setup"
        }
      ],
      "description": {
        "kind": "markdown",
        "value": "\n- 各 `*.vue` ファイルには、最大 1 つの `<script>` ブロックを含めることができます（[`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup.html) は除く）。\n\n- スクリプトは、ES モジュールとして実行されます。\n\n- **default export** は、プレーンオブジェクトか [defineComponent](https://ja.vuejs.org/api/general.html#definecomponent) の戻り値のどちらかで、Vue のコンポーネントオプションオブジェクトになっている必要があります。\n"
      },
      "references": "api/sfc-spec.html#script"
    },
    {
      "name": "script setup",
      "attributes": [],
      "description": {
        "kind": "markdown",
        "value": "\n- 各 `*.vue` ファイルには、最大 1 つの `<script setup>` ブロックを含めることができます（通常の `<script>` は除く）。\n\n- スクリプトは前処理され、コンポーネントの `setup()` 関数として使用されます。これは、**コンポーネントの各インスタンスに対して**実行されることを意味します。`<script setup>` のトップレベルのバインディングは、自動的にテンプレートに公開されます。詳細は [`<script setup>` に関する専用のドキュメント](https://ja.vuejs.org/api/sfc-script-setup.html)を参照してください。\n"
      },
      "references": "api/sfc-spec.html#script-setup"
    },
    {
      "name": "style",
      "attributes": [
        {
          "name": "src",
          "description": {
            "kind": "markdown",
            "value": "`*.vue` コンポーネントを複数のファイルに分割したい場合は、`src` 属性を使用して言語ブロックに外部ファイルをインポートできます:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` でのインポートは webpack のモジュールリクエストと同じパス解決ルールに従うので注意してください。つまり:\n\n- 相対パスは `./` で始める必要があります\n- npm の依存関係からリソースをインポートできます:\n\n```vue\n<!-- インストール済みの \"todomvc-app-css\" npm パッケージからファイルをインポート -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` でのインポートは、カスタムブロックでも動作します。例:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\n`src` でエイリアスを使用する場合、モジュールリクエストとして解釈される `~` から始めないでください。これは、ノードモジュール内のアセットを参照できることを意味します:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
          },
          "references": "api/sfc-spec.html#src-imports"
        },
        {
          "name": "lang",
          "description": {
            "kind": "markdown",
            "value": "ブロックに `lang` 属性を使ってプリプロセッサーの言語を宣言できます。最も一般的なケースは、`<script>` ブロックでの TypeScript の使用です:\n\n```html\n<script lang=\"ts\">\n  // TypeScript を使う\n</script>\n```\n\n`lang` はどのブロックにも適用できます - 例えば、`<style>` で [Sass](https://sass-lang.com/) を使用したり、`<template>` で [Pug](https://pugjs.org/api/getting-started.html) を使用できます:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\nなお、各種プリプロセッサーとの統合はツールチェーンによって異なる場合があることに注意してください。例については、それぞれのドキュメントを参照してください:\n\n- [Vite](https://ja.vite.dev/guide/features.html#css-%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
          },
          "values": [
            {
              "name": "css"
            },
            {
              "name": "scss"
            },
            {
              "name": "less"
            },
            {
              "name": "stylus"
            },
            {
              "name": "postcss"
            },
            {
              "name": "sass"
            }
          ],
          "references": "api/sfc-spec.html#pre-processors"
        },
        {
          "name": "scoped",
          "valueSet": "v",
          "description": {
            "kind": "markdown",
            "value": "`<style>` タグに `scoped` 属性が指定されている場合、その CSS は現在のコンポーネントの要素のみに適用されます。これは、Shadow DOM に見られるスタイルのカプセル化に似ています。これはいくつかの注意点がありますが、ポリフィルは必要ありません。これは、PostCSS を使って変換することで実現されます。次のコードは:\n\n```vue\n<style scoped>\n.example {\n  color: red;\n}\n</style>\n\n<template>\n  <div class=\"example\">hi</div>\n</template>\n```\n\n以下のように変換されます:\n\n```vue\n<style>\n.example[data-v-f3f3eg9] {\n  color: red;\n}\n</style>\n\n<template>\n  <div class=\"example\" data-v-f3f3eg9>hi</div>\n</template>\n```\n\n### 子コンポーネントのルート要素 \n\n`scoped` を使用すると、親コンポーネントのスタイルが子コンポーネントに漏れることはありません。しかし、子コンポーネントのルートノードは親のスコープ付き CSS と子のスコープ付き CSS の両方の影響を受けることになります。これは、親コンポーネントがレイアウトのために子コンポーネントのルート要素のスタイルを設定できるようにするための設計です。\n\n### deep セレクター \n\n`scoped` スタイルのセレクターを \"deep\" にしたい場合、つまり子コンポーネントに影響を与えたい場合は、`:deep()` 擬似クラスを使用できます:\n\n```vue\n<style scoped>\n.a :deep(.b) {\n  /* ... */\n}\n</style>\n```\n\n上記は次のようにコンパイルされます:\n\n```css\n.a[data-v-f3f3eg9] .b {\n  /* ... */\n}\n```\n\n:::tip\n`v-html` で作成された DOM コンテンツは、スコープ付きスタイルの影響を受けませんが、deep セレクターを使用してスタイルを設定可能です。\n:::\n\n### slotted セレクター \n\n`<slot/>` によってレンダリングされるコンテンツは、デフォルトでは親コンポーネントによって所有されていると見なされるため、スコープ付きスタイルの影響を受けません。明示的にスロットのコンテンツをターゲットにするには、`:slotted` 疑似クラスを使用します:\n\n```vue\n<style scoped>\n:slotted(div) {\n  color: red;\n}\n</style>\n```\n\n### global セレクター \n\nもし 1 つのルールだけをグローバルに適用したい場合は、別の `<style>` を作成するかわりに、`:global` 疑似クラスを使用できます（以下を参照）:\n\n```vue\n<style scoped>\n:global(.red) {\n  color: red;\n}\n</style>\n```\n\n### ローカルスタイルとグローバルスタイルの混在 \n\nスコープ付きスタイルとスコープなしスタイルの両方を同じコンポーネントに含めることもできます:\n\n```vue\n<style>\n/* グローバルスタイル */\n</style>\n\n<style scoped>\n/* ローカルスタイル */\n</style>\n```\n\n### スコープ付きスタイルのヒント \n\n- **スコープ付きスタイルでクラスが不要になるわけではありません**。ブラウザーの様々な CSS セレクターのレンダリング方法により、`p { color: red }` をスコープ付きにした場合（つまり属性セレクターと組み合わせた場合）、何倍も遅くなります。その代わり、`.example { color: red }` のようにクラスや ID を使用すれば、このパフォーマンス低下をほぼ排除できます。\n\n- **再帰的コンポーネントでの子孫セレクターに注意！** `.a .b` というセレクターがある CSS ルールにおいて、`.a` にマッチする要素が再帰的な子コンポーネントを含む場合、その子コンポーネントのすべての `.b` がルールにマッチされます。"
          },
          "references": "api/sfc-css-features.html#scoped-css"
        },
        {
          "name": "module",
          "valueSet": "v",
          "description": {
            "kind": "markdown",
            "value": "`<style module>` タグは [CSS モジュール](https://github.com/css-modules/css-modules)としてコンパイルされ、結果として得られる CSS クラスを `$style` というキーの下にオブジェクトとしてコンポーネントに公開します:\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n生成されたクラスは衝突を避けるためにハッシュ化され、CSS を現在のコンポーネントのみにスコープするのと同じ効果を得ることができます。\n\n[グローバルの例外](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions)や[コンポジション](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition)などの詳細は、[CSS モジュールの仕様](https://github.com/css-modules/css-modules)を参照してください。\n\n### カスタム注入名 \n\n`module` 属性に値を与えることで、注入されるクラスオブジェクトのプロパティキーをカスタマイズできます:\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### Composition API での使用 \n\n注入されたクラスは、`useCssModule` API を介して `setup()` や `<script setup>` の中でアクセスできます。カスタム注入名を持つ `<style module>` ブロックの場合、`useCssModule` は最初の引数としてマッチする `module` 属性の値を受け取ります:\n\n```js\nimport { useCssModule } from 'vue'\n\n// setup() スコープの内側...\n// デフォルトでは <style module> のクラスを返します\nuseCssModule()\n\n// 名前付きの例、<style module=\"classes\"> のクラスを返します\nuseCssModule('classes')\n```\n\n- **例**\n\n```vue\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue'\n\nconst classes = useCssModule()\n</script>\n\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```"
          },
          "references": "api/sfc-css-features.html#css-modules"
        }
      ],
      "description": {
        "kind": "markdown",
        "value": "\n- 1 つの `*.vue` ファイルに複数の `<style>` タグを含めることができます。\n\n- スタイルを現在のコンポーネントにカプセル化するため、`<style>` タグに `scoped` または `module` 属性を指定できます（詳細は [SFC スタイル機能](https://ja.vuejs.org/api/sfc-css-features.html)を参照）。同じコンポーネント内に、異なるカプセル化モードを持つ複数の `<style>` タグを混在させることができます。\n"
      },
      "references": "api/sfc-spec.html#style"
    },
    {
      "name": "カスタムブロック",
      "attributes": [
        {
          "name": "src",
          "description": {
            "kind": "markdown",
            "value": "`*.vue` コンポーネントを複数のファイルに分割したい場合は、`src` 属性を使用して言語ブロックに外部ファイルをインポートできます:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` でのインポートは webpack のモジュールリクエストと同じパス解決ルールに従うので注意してください。つまり:\n\n- 相対パスは `./` で始める必要があります\n- npm の依存関係からリソースをインポートできます:\n\n```vue\n<!-- インストール済みの \"todomvc-app-css\" npm パッケージからファイルをインポート -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` でのインポートは、カスタムブロックでも動作します。例:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\n`src` でエイリアスを使用する場合、モジュールリクエストとして解釈される `~` から始めないでください。これは、ノードモジュール内のアセットを参照できることを意味します:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
          },
          "references": "api/sfc-spec.html#src-imports"
        }
      ],
      "description": {
        "kind": "markdown",
        "value": "\nプロジェクト固有のニーズに応じて、`*.vue` ファイルに `<docs>` ブロックのような追加のカスタムブロックを含めることができます。カスタムブロックの実際の例としては、以下のようなものがあります:\n\n- [Gridsome: `<page-query>`](https://gridsome.org/docs/querying-data/)\n- [vite-plugin-vue-gql: `<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)\n- [vue-i18n: `<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#i18n-custom-block)\n\nカスタムブロックの扱いはツールに依存します - 独自のカスタムブロック統合を構築したい場合は、[SFC カスタムブロック統合ツールのセクション](https://ja.vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations)で詳細を確認してください。\n"
      },
      "references": "api/sfc-spec.html#カスタムブロック"
    }
  ],
  "globalAttributes": [
    {
      "name": "lang",
      "description": {
        "kind": "markdown",
        "value": "ブロックに `lang` 属性を使ってプリプロセッサーの言語を宣言できます。最も一般的なケースは、`<script>` ブロックでの TypeScript の使用です:\n\n```html\n<script lang=\"ts\">\n  // TypeScript を使う\n</script>\n```\n\n`lang` はどのブロックにも適用できます - 例えば、`<style>` で [Sass](https://sass-lang.com/) を使用したり、`<template>` で [Pug](https://pugjs.org/api/getting-started.html) を使用できます:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\nなお、各種プリプロセッサーとの統合はツールチェーンによって異なる場合があることに注意してください。例については、それぞれのドキュメントを参照してください:\n\n- [Vite](https://ja.vite.dev/guide/features.html#css-%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
      },
      "values": [],
      "references": "api/sfc-spec.html#pre-processors"
    },
    {
      "name": "src",
      "description": {
        "kind": "markdown",
        "value": "`*.vue` コンポーネントを複数のファイルに分割したい場合は、`src` 属性を使用して言語ブロックに外部ファイルをインポートできます:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n`src` でのインポートは webpack のモジュールリクエストと同じパス解決ルールに従うので注意してください。つまり:\n\n- 相対パスは `./` で始める必要があります\n- npm の依存関係からリソースをインポートできます:\n\n```vue\n<!-- インストール済みの \"todomvc-app-css\" npm パッケージからファイルをインポート -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` でのインポートは、カスタムブロックでも動作します。例:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\n`src` でエイリアスを使用する場合、モジュールリクエストとして解釈される `~` から始めないでください。これは、ノードモジュール内のアセットを参照できることを意味します:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
      },
      "references": "api/sfc-spec.html#src-imports"
    }
  ]
}