vue-router-best-practices
80Vue Routerガードの信頼性を向上させる
Vue Routerのミスは、古いデータ、チェックの回避、リダイレクトループを引き起こす可能性があります。このスキルは、安全なガード、ルート更新、クリーンアップ、本番環境向けルーティングのための焦点を絞ったパターンを提供します。
焦点を絞ったガイダンスで Nuxt アプリを構築
Nuxt プロジェクトには、ルーティング、データ取得、サーバーAPI、レンダリングモードにまたがる多くの規約があります。この skill は、厳選されたリファレンスファイルに基づいて、Claude、Codex、Claude Code に Nuxt 向けの焦点を絞ったガイダンスを提供します。
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "nuxt" from https://skillstore.io/skills/antfu-nuxt.md and its manifest at https://skillstore.io/api/skills/antfu-nuxt/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
「nuxt」を使用しています。 SSR product page では product data をどのように取得すべきですか?
期待される結果:
「nuxt」を使用しています。 setup の外で composable が失敗するのはなぜですか?
期待される結果:
回答では、有効な Nuxt composable contexts、module-level calls が失敗する理由、runtime config へのアクセスを関数内へ移動する方法を説明します。
「nuxt」を使用しています。 この route は prerendered にすべきですか、それとも server rendered にすべきですか?
期待される結果:
回答では、content freshness、user-specific data、SEO needs、cache behavior、route rule options を比較します。
All static findings are false positives from Nuxt documentation syntax and examples. However, one inline configuration example could enable script injection when configuration contains untrusted script-closing text. No prompt injection, secret exfiltration, or malicious intent was found.
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/antfu-nuxt/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/antfu-nuxt?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/antfu-nuxt?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/antfu-nuxt/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/antfu-nuxt.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>antfu. (2026). nuxt security audit report (audit version 5) [Author version 2026.6.22]. Skillstore. https://skillstore.io/skills/antfu-nuxt/audits/5@techreport{antfu-antfu-nuxt-2026,
author = {antfu},
title = {nuxt security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/antfu-nuxt/audits/5},
note = {Author version 2026.6.22}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "nuxt security audit report (audit version 5)"
version: "2026.6.22"
type: report
authors:
- name: "antfu"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/antfu-nuxt/audits/5"
identifiers:
- type: other
value: "skillstore:antfu-nuxt:audit:5"
description: "Skillstore immutable audit report identifier"
各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Nuxt の規約に合った pages、layouts、route middleware、navigation patterns を作成します。
Nitro server routes、request handlers、middleware、plugins、共有 server utilities を計画します。
パフォーマンスと SEO の目標に合わせて、SSR、client rendering、prerendering、hybrid route rules を選択します。
私の Nuxt アプリの主要フォルダと、pages、components、composables、server、plugins をいつ使うべきかを説明してください。
私の Nuxt data fetching のアプローチをレビューしてください。useFetch、useAsyncData、$fetch、lazy fetching、refresh をいつ使うべきかを推奨してください。
この機能のための Nuxt server API を設計してください。routes、middleware、validation、error handling、共有 utilities をどこに置くべきかを含めてください。
この Nuxt rendering strategy を評価してください。SSR、CSR、prerendering、route rules、hydration risk、caching、deployment tradeoffs を比較してください。
作成者
antfuライセンス
MIT
作者バージョン
v2026.6.22
Skillstore リビジョン
r1
参照
89edfdc710d0846129dcee6a929477b04f08052c
メンテナンスの新しさ
2026/7/24
利用状況
18 ダウンロード · 872 閲覧
Vue Routerガードの信頼性を向上させる
Vue Routerのミスは、古いデータ、チェックの回避、リダイレクトループを引き起こす可能性があります。このスキルは、安全なガード、ルート更新、クリーンアップ、本番環境向けルーティングのための焦点を絞ったパターンを提供します。
Vueテスト品質の改善
Vueのテストは、非同期タイミング、壊れやすい内部実装への依存、弱いスナップショットが原因で失敗しがちです。このスキルは、Claude、Codex、Claude Codeが信頼性の高いVitest、Vue Test Utils、Playwrightのパターンを採用できるように導きます。
Vue 3 の型安全性を向上させる
Vue プロジェクトでは、template、Volar、router、TypeScript のエッジケースに遭遇し、レビューが遅くなることがよくあります。このスキルは、より安全な components、configs、tests のために、Vue 3 に特化したルールを提供します。
自信を持ってVue 3コンポーネントを構築する
Vueチームには、コンポーネント、リアクティビティ、TypeScriptパターンに関する最新のガイダンスが必要です。このスキルは、Claude、Codex、Claude Codeに焦点を絞ったVue 3.5のリファレンスを提供します。
Vite アプリをより速く構築
Vite プロジェクトでは、開発、ビルド、プラグイン、デプロイ全体にわたる慎重な設定が必要です。このスキルは、一般的な Vite ワークフローに関する簡潔なガイダンスを提供します。
信頼性の高い Vitest テストスイートを構築
最新の JavaScript プロジェクトには、Vite のワークフローに合った高速なテストが必要です。このスキルは、Claude、Codex、Claude Code に対して、Vitest のセットアップ、モック、カバレッジ、フィクスチャ、フィルタリング、スナップショット、CI 利用をガイドします。
Build SSR-Safe Markstream Views in Nuxt
作成者 simon-he95
Nuxt applications can fail during SSR when browser-only rendering tools load on the server. This skill guides safe markstream-vue setup, mode selection, streaming behavior, and MarkdownRender integration.
適応性の高い Vue Composables を作成する
作成者 vuejs-ai
Vue composables は、呼び出し側がプレーンな値、refs、ゲッターを混在させて渡すと失敗しがちです。このスキルは、Claude、Codex、Claude Code が予測可能な Vue リアクティビティを備えた再利用可能な composables を設計できるよう支援します。
Vue Pinia ストアパターンの改善
作成者 vuejs-ai
Vue アプリケーションは、ストアのセットアップ、分割代入、URL 状態のルールを見落としやすいため、失敗することがよくあります。このスキルは、Claude、Codex、Claude Code に対して、信頼性の高いストアと予測可能なリアクティビティを実現するための Pinia に特化したガイダンスを提供します。
より優れた Vue と Nuxt コンポーネントを構築する
作成者 vuejs-ai
Vue と Nuxt プロジェクトでは、状態が不明確で、コンポーネントが壊れやすく、データフローに一貫性がないことがよくあります。このスキルは、AI アシスタントを実践的な Vue 3 と Nuxt 3 のパターンへ導きます。
Vue 3のランタイム問題をよりすばやくデバッグ
作成者 vuejs-ai
Vue 3の不具合は、多くの場合、リアクティビティ、ライフサイクル、テンプレート、またはSSRのエッジケースに起因します。このスキルは、症状を実用的な修正を含む重点的なデバッグガイドへ振り分けます。
型安全なReactコンポーネントを構築
作成者 softaworks
React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。