{"id":7666,"date":"2024-02-07T16:18:45","date_gmt":"2024-02-07T09:18:45","guid":{"rendered":"https:\/\/www.briswell-vn.com\/?p=7666"},"modified":"2024-04-02T13:11:38","modified_gmt":"2024-04-02T06:11:38","slug":"nuxt-the-intuitive-web-framework","status":"publish","type":"post","link":"https:\/\/www.briswell-vn.com\/ja\/news\/nuxt-the-intuitive-web-framework\/","title":{"rendered":"NUXT\u30fb\u76f4\u89b3\u7684\u306aWEB\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af"},"content":{"rendered":"<p><\/p>\n<h2>\u306f\u3058\u3081\u306b<\/h2>\n<p style=\"text-align: left;\">Nuxt\u306f\u3001Vue.js\u306b\u57fa\u3065\u304f\u516c\u958b\u30bd\u30fc\u30b9\u306eJavaScript\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u4e00\u3064\u3067\u3059\u3002\u73fe\u6642\u70b9\u3067\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u306fNuxt 3\u3067\u3059\u3002Nuxt 3\u306fVite\u3001Vue 3\u3068Nitro\u306b\u57fa\u3065\u304d\u3001Typescript\u306e\u30b5\u30dd\u30fc\u30c8\u3067Nuxt\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304b\u3089\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u3055\u308c\u305f\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u3059\u3002<\/p>\n<p style=\"text-align: left;\">Nuxt\u306f\u3001CSR\u3001ISR\u3001ESR\u3001SWR\u3068\u3044\u3063\u305f\u65b9\u6cd5\u306b\u52a0\u3048\u3066\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3068\u3044\u3046Server Side Rendering\uff08SSR\u3068\u7565\u3059\uff09\u3068\u9759\u7684\u30b5\u30a4\u30c8\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u3068\u3044\u3046Static Site Generator\uff08SSG\u3068\u7565\u3059\uff09\u306e\u65b9\u6cd5\u3067\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u3092\u7c21\u7d20\u5316\u3067\u304d\u307e\u3059\u3002Nuxt \u306f\u3001Vue.js\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u898f\u7d04\u30d9\u30fc\u30b9\u3067\u69cb\u6210\u3055\u308c\u305f\u30a2\u30d7\u30ed\u30fc\u30c1\u306e\u624b\u6bb5\u3092\u63d0\u4f9b\u3057\u3001\u958b\u767a\u8005\u304c\u8907\u96d1\u306a\u69cb\u6210\u3092\u51e6\u7406\u3059\u308b\u4ee3\u308f\u308a\u306b\u306b\u6a5f\u80fd\u306e\u958b\u767a\u306b\u96c6\u4e2d\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<h2>\u3069\u3046\u3057\u3066Nuxt\u3092\u4f7f\u3046\u304b<\/h2>\n<p><strong>\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0 \uff08SSR\uff09<\/strong>\uff1aNuxt\u306f\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u6d3b\u7528\u3057\u3066\u3044\u307e\u3059\u3002\u3064\u307e\u308a\u3001Vue.js\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u9001\u4fe1\u3055\u308c\u308b\u524d\u306b\u30b5\u30fc\u30d0\u30fc\u3067\u4e8b\u524d\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u308b\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u305f\u5185\u5bb9\u306b\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u4ed8\u3051\u308b\u3053\u3068\u306e\u3067\u304d\u3063\u308b\u305f\u3081\u3001\u30da\u30fc\u30b8\u521d\u671f\u5316\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u5411\u4e0a\u3055\u308c\u3001\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u6700\u9069\u5316\uff08SEO\uff09\u304c\u53ef\u80fd\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><strong>\u9759\u7684\u30b5\u30a4\u30c8\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc \uff08SSG\uff09<\/strong>\uff1a Nuxt\u306f\u3001\u30d3\u30eb\u30c9\u6642\u306b\u9759\u7684\u306aHTML\u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210\u3067\u304d\u3001\u76f4\u63a5\u306b\u3001CDN\u307e\u305f\u306f\u9759\u7684\u30db\u30b9\u30c6\u30a3\u30f3\u30b0\u30b5\u30fc\u30d3\u30b9\u304b\u3089\u63d0\u4f9b\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u306b\u3088\u308a\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u3054\u3068\u306e\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306e\u5fc5\u8981\u6027\u3092\u7121\u304f\u3057\u3066\u3001\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u304c\u9ad8\u901f\u3068\u306a\u308a\u3001\u62e1\u5f35\u6027\u304c\u5411\u4e0a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p><strong>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u9ad8\u901f\u5316<\/strong>\uff1aVue\u306e\u4eee\u60f3DOM\uff08VDOM\uff09\u306f\u30bc\u30ed\u304b\u3089\u66f8\u304d\u76f4\u3055\u308c\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u5411\u4e0a\u3055\u308c\u307e\u3057\u305f\u3002\u307e\u305f\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u305f\u30b7\u30f3\u30b0\u30eb\u30d5\u30a1\u30a4\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3044\u3046Single-File Component\uff08SFC\u3068\u7565\u3059\uff09 \u3068\u64cd\u4f5c\u3059\u308b\u5834\u5408\u3001Vue\u306e\u30b3\u30f3\u30d1\u30a4\u30e9\u30fc\u306f\u30d3\u30eb\u30c9\u6642\u306b\u9759\u7684\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u3068\u52d5\u7684\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u306b\u5206\u96e2\u3059\u308b\u3053\u3068\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3055\u3089\u306b\u6700\u9069\u5316\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u6700\u521d\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\uff08\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u751f\u6210\uff09\u304a\u3088\u3073\u66f4\u65b0\u304c\u8fc5\u901f\u306b\u884c\u308f\u308c\u3001\u30e1\u30e2\u30ea\u306e\u4f7f\u7528\u91cf\u304c\u524a\u6e1b\u3055\u308c\u307e\u3059\u3002Nuxt 3\u3067\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3082\u9ad8\u901f\u5316\u3055\u308c\u307e\u3059\u3002<\/p>\n<p><strong>\u30d0\u30f3\u30c9\u30eb\u7e2e\u5c0f\u5316<\/strong>\uff1aVue 3\u3068Nuxt 3\u3067\u306f\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u306e\u524a\u6e1b\u306b\u7126\u70b9\u3092\u5f53\u3066\u3066\u3044\u307e\u3059\u3002Tree-shaking\u3068\u3044\u3046\u30c4\u30ea\u30fc\u30b7\u30a7\u30a4\u30af\u624b\u6cd5\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u672c\u756a\u74b0\u5883\u306b\u304a\u3044\u3066\u306f\u3001\u30d0\u30f3\u30c9\u30eb\u6642\u3001\u4f7f\u308f\u306a\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30fb\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3068\u3044\u3063\u305fVue\u306e\u6a5f\u80fd\u3092\u9664\u5916\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c\u524a\u6e1b\u3055\u308c\u3066\u3001\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u304c\u9ad8\u901f\u5316\u3055\u308c\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8aad\u307f\u8fbc\u307f\u6642\u9593\u3082\u77ed\u7e2e\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u65b9\u6cd5\u3067\u306f\u3001Vue 3\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306fgzip\u3067\u5727\u7e2e\u3059\u308b\u3068\u3001\u5c11\u306a\u304f\u3068\u308212 kb\u306b\u7e2e\u5c0f\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u5e83\u7bc4\u5316<\/strong>\uff1aNuxt\u306f\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306b\u3088\u3063\u3066\u8ca2\u732e\u3055\u308c\u305f\u591a\u69d8\u306a\u958b\u767a\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3092\u6301\u3063\u3066\u3044\u307e\u3059\u3002\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3001\u30c4\u30fc\u30eb\u3092\u5229\u7528\u3057\u3066\u3001\u81ea\u5206\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u62e1\u5f35\u3057\u3001\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u30b5\u30dd\u30fc\u30c8<\/strong>\uff1a Nuxt 2\u306f\u3001\u65e2\u306b\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001Nuxt 3\u3067\u306f\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u30b5\u30dd\u30fc\u30c8\u304c\u66f4\u306b\u5f37\u5316\u3055\u308c\u3066\u304a\u308a\u3001Nuxt \u304c Typescript \u306b\u57fa\u3065\u3044\u3066\u63d0\u4f9b\u3059\u308bType-checking\u6a5f\u80fd\u3084\u305d\u306e\u4ed6\u306e\u30c4\u30fc\u30eb\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>\u958b\u767a\u306e\u7c21\u7d20\u5316<\/strong>\uff1a Nuxt\u306f\u3001\u30b3\u30f3\u30d9\u30f3\u30b7\u30e7\u30f3\u30aa\u30fc\u30d0\u30fc\u30b3\u30f3\u30d5\u30a3\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u3044\u3046\u8a2d\u5b9a\u3088\u308a\u898f\u7d04\u306b\u3088\u308a\u3001\u5b9a\u578b\u30b3\u30fc\u30c9\u3092\u524a\u6e1b\u3057\u3066\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u3092\u7c21\u7d20\u5316\u3057\u307e\u3059\u3002\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3001\u30b3\u30fc\u30c9\u5206\u5272\u3001\u72b6\u614b\u7ba1\u7406\u306a\u3069\u306e\u6a5f\u80fd\u304c\u7d44\u307f\u8fbc\u307e\u308c\u305f\u306e\u3067\u3001\u8a2d\u5b9a\u3084\u69cb\u6210\u306b\u3064\u3044\u3066\u5fc3\u914d\u3059\u308b\u3053\u3068\u306a\u304f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30ed\u30b8\u30c3\u30af\u306e\u69cb\u7bc9\u306b\u96c6\u4e2d\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>\u826f\u3044\u958b\u767a\u8005\u4f53\u9a13<\/strong>\uff1aNuxt\u306f\u3001\u30db\u30c3\u30c8\u30e2\u30b8\u30e5\u30fc\u30eb\u30ea\u30d7\u30ec\u30a4\u30b9\u30e1\u30f3\u30c8\u3001\u52d5\u30ea\u30ed\u30fc\u30c9\u3001\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u7b49\u306e\u6a5f\u80fd\u3084\u3001\u30c7\u30d0\u30c3\u30b0\u3001\u30c6\u30b9\u30c8\u3001\u958b\u767a\u306e\u305f\u3081\u306e\u9769\u65b0\u7684\u306a\u30c4\u30fc\u30eb\u3084\u4ed6\u306e\u30c4\u30fc\u30eb\u3092\u5099\u3048\u305f\u5805\u7262\u306a\u958b\u767a\u74b0\u5883\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u6a5f\u80fd\u306b\u3088\u3063\u3066\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u304c\u5408\u7406\u5316\u3055\u308c\u3066\u304a\u308a\u3001\u7e70\u308a\u8fd4\u3057\u304c\u3088\u308a\u901f\u304f\u306a\u308a\u3001\u30c7\u30d0\u30c3\u30b0\u306e\u53ef\u80fd\u6027\u304c\u3088\u308a\u826f\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><strong>\u62e1\u5f35\u6027\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/strong>\uff1aNuxt\u306f\u3001\u81ea\u52d5\u30b3\u30fc\u30c9\u5206\u5272\u3001\u30ec\u30a4\u30b8\u30fc\u30ed\u30fc\u30c9\u3001\u30d7\u30ec\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3068\u3044\u3063\u305f\u5404\u6a5f\u80fd\u3092\u901a\u3058\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u9069\u5316\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u5fc5\u8981\u306aJavaScript\u306e\u307f\u304c\u5404\u30da\u30fc\u30b8\u306b\u30ed\u30fc\u30c9\u3055\u308c\u308b\u306e\u3067\u3001\u8aad\u307f\u8fbc\u307f\u6642\u9593\u304c\u901f\u304f\u306a\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u304c\u5411\u4e0a\u3055\u308c\u307e\u3059\u3002\u307e\u305f\u3001Nuxt\u306e\u30e2\u30b8\u30e5\u30e9\u30fc\u578b\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3067\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u3059\u308b\u6642\u306b\u6613\u304f\u62e1\u5f35\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<h2><strong><span class=\"notion-enable-hover\" data-token-index=\"0\">\u30b5\u30dd\u30fc\u30c8\u4e2d\u306e\u6280\u8853<\/span><\/strong><\/h2>\n<ol>\n<li><a href=\"https:\/\/webpack.js.org\/\">Webpack 5<\/a><\/li>\n<li><a href=\"https:\/\/vitejs.dev\/\">Vite<\/a><\/li>\n<li><a href=\"https:\/\/nitro.unjs.io\/\">Nitro<\/a><\/li>\n<li><a href=\"https:\/\/vuejs.org\/\">Vue 3<\/a><\/li>\n<li><a href=\"https:\/\/router.vuejs.org\/\">Router 4<\/a><\/li>\n<li><a href=\"https:\/\/www.typescriptlang.org\/\">Typescript<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2>\u5404\u6a5f\u80fd\u306e\u6bd4\u8f03<\/h2>\n<p>\u4ee5\u4e0b\u306b\u3001Nuxt\u306e3\u3064\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u9593\u306e\u6bd4\u8f03\u8868\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7690 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06143637\/feature-comparison.png\" alt=\"\" width=\"737\" height=\"816\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06143637\/feature-comparison.png 737w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06143637\/feature-comparison-271x300.png 271w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06143637\/feature-comparison-226x250.png 226w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u9020<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7706 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06160101\/directory-structure2.png\" alt=\"\" width=\"212\" height=\"807\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06160101\/directory-structure2.png 212w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06160101\/directory-structure2-79x300.png 79w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06160101\/directory-structure2-66x250.png 66w\" sizes=\"auto, (max-width: 212px) 100vw, 212px\" \/><\/p>\n<p><strong>.nuxt<\/strong>\uff1aNuxt\u306f\u3001\u958b\u767a\u4e2d\u306b\u300c<strong>.nuxt\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f7f\u7528\u3057\u3066 Vue\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p><strong>.output<\/strong>\uff1aNuxt\u306f\u3001\u672c\u756a\u74b0\u5883\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d3\u30eb\u30c9\u3059\u308b\u6642\u306b\u300c<strong>.output\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p><strong>assets<\/strong>\uff1a\u300c<strong>assets\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306f\u3001\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\uff08webpack\u307e\u305f\u306fVite\uff09\u304c\u51e6\u7406\u3059\u308b\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u3059\u3079\u3066\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8ffd\u52a0\u3059\u308b\u305f\u3081\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002\u901a\u5e38\u3001\u3053\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306f\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\uff08CSS\u3001SASS\u306a\u3069\uff09\u3001\u30d5\u30a9\u30f3\u30c8\u3001 \u300c<strong>public\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304b\u3089\u63d0\u4f9b\u3055\u308c\u306a\u3044\u753b\u50cf\u3068\u3044\u3063\u305f\u30d5\u30a1\u30a4\u30eb\u304c\u683c\u7d0d\u3055\u308c\u307e\u3059\u3002<\/p>\n<p><strong>components<\/strong>\uff1a\u300c<strong>components\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306f\u3001\u3059\u3079\u3066\u306eVue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u683c\u7d0d\u3059\u308b\u7f6e\u304d\u5834\u3067\u3059\u3002\u305d\u3053\u304b\u3089\u306f\u3001\u30da\u30fc\u30b8\u3084\u4ed6\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>composables<\/strong>\uff1aNuxt 3\u3067\u306f\u3001\u81ea\u52d5\u30a4\u30f3\u30dd\u30fc\u30c8\u6a5f\u80fd\u3092\u4f7f\u3046\u3053\u3068\u3067\u300c<strong>composables\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u5229\u7528\u3057\u3066Vue\u30b3\u30f3\u30dd\u30fc\u30b6\u30d6\u30eb\u3092\u81ea\u52d5\u7684\u306b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p><strong>content<\/strong>\uff1a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eCMS\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u3001.md\u3001.yml\u3001.csv\u306e\u30d5\u30a1\u30a4\u30eb\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p><strong>layouts<\/strong>\uff1a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u898b\u305f\u76ee\u3092\u5909\u66f4\u3059\u308b\u305f\u3081\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u306f\u3001\u7ba1\u7406\u8005\u7528\u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u30b2\u30b9\u30c8\u7528\u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u767b\u9332\u6e08\u307f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u7528\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u3044\u3063\u305f\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u8907\u6570\u3042\u308a\u5f97\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u7570\u306a\u308b\u30da\u30fc\u30b8\u306b\u6d41\u7528\u3055\u308c\u3066\u3001\u898b\u305f\u76ee\uff08\u30b5\u30a4\u30c9\u30d0\u30fc\u3001\u30e1\u30cb\u30e5\u30fc\u3001\u30d5\u30c3\u30bf\u30fc\u7b49\uff09\u3092\u51e6\u7406\u3057\u307e\u3059\u3002\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6642\u306b\u3001Nuxt CLI \u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3068\u3057\u3066<strong>layouts\/default.vue<\/strong>\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u8a2d\u5b9a\u3057\u3066\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u306b\u9069\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<p><strong>middleware<\/strong>\uff1a\u30da\u30fc\u30b8\u3092\u8868\u793a\u3055\u305b\u308b\u524d\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002Middleware\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u306b\u3088\u308a\u3001\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u524d\u306b\u8a8d\u8a3c\u3001\u30a2\u30af\u30bb\u30b9\u6a29\u9650\u30c1\u30a7\u30c3\u30af\u3001\u52d5\u4f5c\u30ed\u30b0\u51fa\u529b\u3001\u305d\u306e\u4ed6\u306e\u30ab\u30b9\u30bf\u30e0\u51e6\u7406\u306a\u3069\u306e\u30bf\u30b9\u30af\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>modules<\/strong>\uff1aNuxt\u306f\u3001\u958b\u59cb\u3059\u308b\u524d\u306b\u300c<strong>modules\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u30b9\u30ad\u30e3\u30f3\u3057\u3066\u3001\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002\u305d\u308c\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u6642\u306b\u958b\u767a\u3057\u305f\u30ed\u30fc\u30ab\u30eb\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u914d\u7f6e\u3059\u308b\u306e\u306b\u9069\u3057\u305f\u5834\u6240\u3067\u3059\u3002<\/p>\n<p><strong>node_modules<\/strong>\uff1a\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\uff08npm\u3001yarn\u82e5\u3057\u304f\u306fpnpm\uff09\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u4fdd\u5b58\u3059\u308b\u305f\u3081\u300c<strong>node_modules\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p><strong>pages<\/strong>\uff1aNuxt\u306f\u3001\u30d5\u30a1\u30a4\u30eb\u306b\u57fa\u3065\u304f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u63d0\u4f9b\u3057\u3001\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5185\u306e\u30eb\u30fc\u30c8\u3092Vue Router\u3067\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p><strong>plugins<\/strong>\uff1aNuxt\u306f\u3001\u81ea\u52d5\u7684\u306b\u300c<strong>plugins\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u53d6\u3063\u3066\u3001Vue\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u4f5c\u6210\u6642\u306b\u305d\u308c\u3089\u3092\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u540d\u306b\u3042\u308b\u300c.server\u300d\u304b\u300c.client\u300d\u3068\u3044\u3046\u63a5\u5c3e\u8f9e\u3092\u4f7f\u3063\u3066\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30b5\u30fc\u30d0\u30fc\u6216\u3044\u306f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u306e\u307f\u30ed\u30fc\u30c9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>public<\/strong>\uff1a<span style=\"font-weight: 400;\">\u300c<strong>public\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306f\u3001\u9759\u7684\u30d5\u30a1\u30a4\u30eb\u304c\u542b\u307e\u308c\u3066\u304a\u308a\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u5bfe\u3057\u3066\u8ffd\u52a0\u306e\u30ed\u30b8\u30c3\u30af\u51e6\u7406\u306a\u3057\u3067\u30ea\u30bd\u30fc\u30b9\u3092\u76f4\u63a5\u63d0\u4f9b\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3001\u30d5\u30a9\u30f3\u30c8\u3001robot.txt\u3001favicon.ico\u3001\u9759\u7684\u30d5\u30a1\u30a4\u30eb\u3092\u914d\u7f6e\u3067\u304d\u307e\u3059\u3002<\/span><\/p>\n<p><strong>server<\/strong>\uff1aNuxt\u306f\u3001\u300c<strong>~\/server\/api<\/strong>\u300d\u3001\u300c<strong>~\/server\/routes<\/strong>\u300d\u3001\u300c<strong>~\/server\/middleware<\/strong>\u300d\u306e\u5404\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u81ea\u52d5\u7684\u306b\u30b9\u30ad\u30e3\u30f3\u3057\u3066API\u30cf\u30f3\u30c9\u30e9\u30fc\u3068\u30b5\u30fc\u30d0\u30fc\u30cf\u30f3\u30c9\u30e9\u30fc\u3092HMR\u306e\u30b5\u30dd\u30fc\u30c8\u3067\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n<p><strong>utils<\/strong>\uff1aNuxt 3\u306f\u3001auto-imports\u6a5f\u80fd\u3092\u4f7f\u3046\u3053\u3068\u3067\u300c<strong>utils\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u5229\u7528\u3057\u3066\u30d8\u30eb\u30d1\u30fc\u6a5f\u80fd\u3084\u305d\u306e\u4ed6\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u3092\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u81ea\u52d5\u7684\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p><strong>.env<\/strong>\uff1aNuxt CLI\u306f\u3001\u958b\u767a\u30e2\u30fc\u30c9\u304a\u3088\u3073<code>nuxi build<\/code>\u3084<code>nuxi generate<\/code>\u5b9f\u884c\u6642\u3067\u7d44\u307f\u8fbc\u307e\u308c\u305fdotenv\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\u30d7\u30ed\u30bb\u30b9\u306e\u74b0\u5883\u5909\u6570\u306e\u4ed6\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b.env \u30d5\u30a1\u30a4\u30eb\u304c\u5b58\u5728\u3059\u308b\u5834\u5408\u3001\u305d\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u30d3\u30eb\u30c9\u6642\u3084\u958b\u767a\u6642\u3084\u751f\u6210\u6642\u306b\u81ea\u52d5\u7684\u306b\u30ed\u30fc\u30c9\u3055\u308c\u307e\u3059\u3002\u307e\u305f\u3001\u305d\u3053\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u74b0\u5883\u5909\u6570\u306f \u30e2\u30b8\u30e5\u30fc\u30eb\u3084nuxt.config\u30d5\u30a1\u30a4\u30eb\u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>.gitignore<\/strong>\uff1aGit\u3068\u306e\u64cd\u4f5c\u3059\u308b\u5ea6\u306b\u30d1\u30fc\u30b9\u3055\u308c\u305f\u304f\u306a\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5185\u306e\u30d5\u30a1\u30a4\u30eb\u3084\u30d5\u30a9\u30eb\u30c0\u306e\u540d\u524d\u3092\u30ea\u30b9\u30c8\u30a2\u30c3\u30d7\u3059\u308b\u3053\u3068\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002<\/p>\n<p><strong>.nuxtignore<\/strong>\uff1aNuxt \u306f.nuxtignore\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u3046\u3068\u3001\u30d3\u30eb\u30c9\u4e2d\u306b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\uff08rootDir\uff09\u5185\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u30da\u30fc\u30b8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30b6\u30d6\u30eb\u3001\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u7121\u8996\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002.nuxtignore\u30d5\u30a1\u30a4\u30eb\u306f.gitignore\u30d5\u30a1\u30a4\u30eb\u3084.eslintignore\u30d5\u30a1\u30a4\u30eb\u3068\u540c\u3058\u4ed5\u69d8\u306b\u5f93\u3044\u3001\u5404\u884c\u304c\u3069\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u7121\u8996\u3059\u308b\u304b\u306e\u3053\u3068\u3092\u793a\u3059\u30b0\u30ed\u30d6\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002<\/p>\n<p><strong>app.config.ts<\/strong>\uff1aNuxt\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u6210\u3068\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002<\/p>\n<p><strong>app.vue<\/strong>\uff1aNuxt 3\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4e3b\u8981\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002<\/p>\n<p><strong>nuxt.config.ts<\/strong>\uff1anuxt.config.ts\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001Nuxt\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u69cb\u6210\u304c\u542b\u307e\u308c\u3066\u304a\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u6210\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u69cb\u6210\u306b\u306f\u3001\u30d8\u30c3\u30c9 \u30bf\u30a4\u30c8\u30eb\u3001\u95a2\u9023\u30b9\u30bf\u30a4\u30eb\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u3001\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3001\u8a8d\u8a3c\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3001\u3055\u3089\u306bAPI\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n<p><strong>package.json<\/strong>\uff1a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u3059\u3079\u3066\u306e\u4f9d\u5b58\u95a2\u4fc2\u3068\u30b9\u30af\u30ea\u30d7\u30c8\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n<p><strong>tsconfig.json<\/strong>\uff1aNuxt\u306f\u3001\u4ed6\u306e\u9069\u5207\u306a\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3092.nuxt\/tsconfig.json\u30d5\u30a1\u30a4\u30eb\u3092\u81ea\u52d5\u7684\u306b\u751f\u6210\u3057\u307e\u3059\u3002\u3067\u3059\u306e\u3067\u3001\u30eb\u30fc\u30c8\u306e\u5916\u306btsconfig.json\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u3001\u521d\u671f\u5316\u3055\u308c\u305fNuxt\u30d5\u30a1\u30a4\u30eb\u304b\u3089\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3060\u3051\u3067\u6e08\u307f\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<h2>\u6a5f\u80fd<\/h2>\n<h3><strong>Auto-imports<\/strong><\/h3>\n<p>\u81ea\u52d5\u53d6\u308a\u8fbc\u307f\u3068\u3044\u3046Auto-imports\u306f\u3001Nuxt 3\u3067\u958b\u767a\u3055\u308c\u305f\u65b0\u3057\u3044\u6a5f\u80fd\u3067\u3042\u308a\u3001\u975e\u5e38\u306b\u4fbf\u5229\u3067\u3059\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30b6\u30d6\u30eb\u3001\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u5185\u306e\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u81ea\u52d5\u7684\u306b\u8a8d\u8b58\u3055\u308c\u3001\u518d\u5ea6\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30b6\u30d6\u30eb\u306a\u3069\u306b\u540d\u524d\u3092\u4ed8\u3051\u308b\u3060\u3051\u3067\u6e08\u307f\u307e\u3059\u3002Auto-imports\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3068\u3057\u3066\u6709\u52b9\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u304c\u3001nuxt.config.ts\u30d5\u30a1\u30a4\u30eb\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7121\u52b9\u306b\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre>export default defineNuxtConfig({\r\n  imports: {\r\n    autoImport: false\r\n  }\r\n})\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3><strong>Rendering Modes<\/strong><\/h3>\n<p>Nuxt\u306f\u3001\u30e6\u30cb\u30d0\u30fc\u30b5\u30eb \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3068\u3044\u3063\u305f\u69d8\u3005\u306a\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0 \u30e2\u30fc\u30c9\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9 \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u63d0\u4f9b\u3057\u3066\u3001CDN\u30a8\u30c3\u30b8\u30b5\u30fc\u30d0\u30fc\u4e0a\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Server Engine<\/strong><\/h3>\n<p>Nuxt 3\u306f\u65b0\u3057\u3044\u30b5\u30fc\u30d0\u30fc\u30a8\u30f3\u30b8\u30f3\u3067\u3042\u308b<a href=\"https:\/\/nitro.unjs.io\/\">Nitro<\/a>\u3092\u642d\u8f09\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<ol>\n<li>Node.js\u3001\u30d6\u30e9\u30a6\u30b6\u3001\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u7b49\u306e\u30af\u30ed\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n<li>\u76f4\u3050\u306b\u4f7f\u3048\u308b\u30b5\u30fc\u30d0\u30fc\u30ec\u30b9\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n<li>API\u30eb\u30fc\u30c8\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n<li>\u81ea\u52d5\u30b3\u30fc\u30c9\u5206\u5272\u3068\u975e\u540c\u671f\u30ed\u30fc\u30c9\u3055\u308c\u305f\u304b\u305f\u307e\u308a\u306e\u81ea\u52d5\u5316<\/li>\n<li>\u9759\u7684\u30da\u30fc\u30b8\u3068\u30b5\u30fc\u30d0\u30fc\u30ec\u30b9\u30da\u30fc\u30b8\u306e\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u30e2\u30fc\u30c9<\/li>\n<li>\u30db\u30c3\u30c8\u30e2\u30b8\u30e5\u30fc\u30eb\u30ea\u30ed\u30fc\u30c9\u3092\u4f7f\u3063\u305f\u958b\u767a\u30b5\u30fc\u30d0\u30fc<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2>Nuxt\u958b\u59cb<\/h2>\n<p><strong>\u524d\u63d0\u6761\u4ef6<\/strong>\uff1aNodejs\u30d0\u30fc\u30b8\u30e7\u30f3\u300016.0.0\u4ee5\u964d<\/p>\n<p>Nuxt CLI\u3092\u4f7f\u7528\u3057\u305f\u7c21\u5358\u306a\u8a2d\u5b9a\u3092<code>nuxi<\/code>\u30b3\u30de\u30f3\u30c9\u3068\u4e00\u7dd2\u306b\u4f7f\u3046\u3068\u3001\u3059\u3079\u3066\u306eNuxt\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001\u7ba1\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 npx\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u305f\u3089\u3001\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3067\u7c21\u5358\u306b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre>&gt; npx nuxi init project-name<\/pre>\n<p>\u7d50\u679c\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>Nuxt project is created with v3 template. Next steps:\r\n\u203a cd project-name\r\n\u203a Install dependencies with npm install or yarn install or pnpm install\r\n\u203a Start development server with npm run dev or yarn dev or pnpm run dev<\/pre>\n<p>\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3067\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre>yarn install<\/pre>\n<p>\u305d\u3057\u3066\u3001\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u9020\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7728 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06171557\/init-project.png\" alt=\"\" width=\"213\" height=\"615\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06171557\/init-project.png 213w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06171557\/init-project-104x300.png 104w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06171557\/init-project-87x250.png 87w\" sizes=\"auto, (max-width: 213px) 100vw, 213px\" \/><br \/>\n\u3053\u308c\u3067\u3001Nuxt \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u30e2\u30fc\u30c9\u3067\u8d77\u52d5\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>yarn dev -o<\/pre>\n<p>\u6b21\u306b\u3001\u30d6\u30e9\u30a6\u30b6\uff08<a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000\/<\/a>\uff09\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3001\u4f5c\u6210\u3057\u305f\u3066\u306eNuxt\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u52d5\u3044\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u30c7\u30d5\u30a9\u30eb\u30c8\u3068\u3057\u3066\u306f\u3001app .vue\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3066\u306e\u5f79\u5272\u3092\u679c\u305f\u3059\u30b3\u30a2 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3042\u308a\u3001\u5404\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3 \u30eb\u30fc\u30c8\u306b\u5bfe\u3057\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u3002\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3082Nuxt\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30eb\u30fc\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3042\u308a\u3001\u4ed6\u306e\u3059\u3079\u3066\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5305\u62ec\u3059\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u69cb\u9020\u3092\u8868\u3057\u307e\u3059\u3002\u901a\u5e38\u3001\u30e1\u30a4\u30f3 \u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3001\u304a\u3088\u3073\u8907\u6570\u306e\u30da\u30fc\u30b8\u9593\u3067\u5171\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u30b0\u30ed\u30fc\u30d0\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3084\u30ed\u30b8\u30c3\u30af\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001app.vue\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u3092\u5c11\u3057\u5909\u66f4\u3057\u3066\u3001\u8868\u793a\u3092\u78ba\u8a8d\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre>&gt; app.vue\r\n&lt;template&gt;\r\n  &lt;div&gt;\r\n    &lt;h1&gt;Welcome to the homepage&lt;\/h1&gt;\r\n  &lt;div&gt;\r\n&lt;\/template&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7732\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06174754\/app.vue_.png\" alt=\"\" width=\"1427\" height=\"181\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06174754\/app.vue_.png 1427w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06174754\/app.vue_-300x38.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06174754\/app.vue_-1024x130.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06174754\/app.vue_-768x97.png 768w\" sizes=\"auto, (max-width: 1427px) 100vw, 1427px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>\u7279\u5fb4<\/h2>\n<h3><strong><span class=\"notion-enable-hover\" data-token-index=\"0\">Pages<\/span><\/strong><\/h3>\n<p>\u3053\u308c\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d3\u30e5\u30fc\u3068\u30eb\u30fc\u30c8\u304c\u914d\u7f6e\u3055\u308c\u308b\u5834\u6240\u3067\u3059\u3002\u30c7\u30d5\u30a9\u30eb\u30c8\u3068\u3057\u3066\u3001Nuxt\u306f\u5404\u30d5\u30a1\u30a4\u30eb\u306b\u57fa\u3065\u304f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u3092\u4f7f\u7528\u3057\u3001\u300c<strong>pages\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e.vue\u30d5\u30a1\u30a4\u30eb\u306e\u4e00\u3064\u305a\u3064\u306f\u4e00\u3064\u306e\u30eb\u30fc\u30c8\u306b\u8a72\u5f53\u3057\u307e\u3059\u3002<\/p>\n<p>Pages\u3092\u4f7f\u3046\u305f\u3081\u306b\u306f\u3001pages\/index.vue\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001&lt;NuxtPage\/&gt;\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092app.vue\u306b\u8ffd\u52a0\u3057\u307e\u3059\uff08\u82e5\u3057\u304f\u306f\u3001pages\/index.vue\u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u306b\u3057\u305f\u3044\u5834\u5408\u3001app.vue\u3092\u524a\u9664\u3057\u307e\u3059\uff09\u3002Pages\u306f\u3001Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3042\u308a\u3001Nuxt\u306e\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u6709\u52b9\u306a\u62e1\u5f35\u5b50 \uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001.vue\u3001.js\u3001.jsx\u3001.mjs\u3001.ts\u3001\u307e\u305f\u306f.tsx\uff09\u3092\u6301\u3064\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Nuxt\u306f\u3001\u300c<strong>~\/pages\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u306b\u5bfe\u3057\u30eb\u30fc\u30c8\u3092\u81ea\u52d5\u7684\u306b\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre>&gt; app.vue (app.vue\u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u306b\u3057\u305f\u5834\u5408)\r\n&lt;template&gt;\r\n  &lt;NuxtPage \/&gt;\r\n&lt;\/template&gt;\r\n\r\n--- .vue ---\r\n&gt; pages\/index.vue\r\n&lt;template&gt;\r\n  &lt;p&gt;Home Page&lt;\/p&gt;\r\n&lt;\/template&gt;\r\n\r\n&gt; pages\/about.vue\r\n&lt;template&gt;\r\n  &lt;p&gt;About Page&lt;\/p&gt;\r\n&lt;\/template&gt;\r\n\r\n--- .ts ---\r\n&gt; pages\/index.ts\r\nexport default defineComponent({\r\n  render () {\r\n    return h('h1', 'Home page');\r\n  }\r\n});\r\n\r\n--- .tsx ---\r\nexport default defineComponent({\r\n  render () {\r\n    return &lt;h1&gt;Home page&lt;\/h1&gt;;\r\n  }\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<h3><strong>Layouts<\/strong><\/h3>\n<p>Layout\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5185\u306e\u5404\u30da\u30fc\u30b8\u306e\u5168\u4f53\u7684\u306a\u30c7\u30b6\u30a4\u30f3\u3068\u69cb\u9020\u3092\u6c7a\u5b9a\u3059\u308b\u4e0a\u3067\u91cd\u8981\u306a\u5f79\u5272\u3092\u679c\u305f\u3057\u307e\u3059\u3002Nuxt\u306eLayout\u306f\u3001\u30da\u30fc\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u8868\u3057\u3001\u8907\u6570\u306e\u30da\u30fc\u30b8\u3067\u7d71\u4e00\u7684\u306a\u898b\u305f\u76ee\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u4ed6\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u7b49\u306e\u7570\u306a\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<blockquote><p><span style=\"color: #ff0000;\"><em><span class=\"notion-enable-hover\" data-token-index=\"0\">\u3082\u3057\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u304c1 \u3064\u3057\u304b\u306a\u3044\u5834\u5408\u3001app.vue\u3092&lt;NuxtPage \/&gt;\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u5171\u306b\u4f7f\u7528\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/span><\/em><\/span><\/p><\/blockquote>\n<p>\u4f55\u3082\u8a2d\u5b9a\u3057\u306a\u3044\u5834\u5408\u3001Nuxt\u306f\u3001default.vue\u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u3068\u3057\u3066\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre>&gt; app.vue\r\n&lt;template&gt;\r\n  &lt;NuxtLayout&gt;\r\n    &lt;NuxtPage \/&gt;\r\n  &lt;\/NuxtLayout&gt;\r\n&lt;\/template&gt;\r\n\r\n&gt; layouts\/default.vue\r\n&lt;template&gt;\r\n  &lt;div&gt;\r\n    &lt;h1&gt;This our default layout&lt;\/h1&gt;\r\n    &lt;slot \/&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&gt; pages\/index.vue\r\n&lt;template&gt;\r\n  &lt;p&gt;Home Page&lt;\/p&gt;\r\n&lt;\/template&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7735\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06175418\/default-layout.png\" alt=\"\" width=\"1427\" height=\"205\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06175418\/default-layout.png 1427w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06175418\/default-layout-300x43.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06175418\/default-layout-1024x147.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06175418\/default-layout-768x110.png 768w\" sizes=\"auto, (max-width: 1427px) 100vw, 1427px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u3067\u306f\u3001\u3082\u3063\u3068\u9762\u767d\u3044\u3053\u3068\u3092\u3084\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u30ab\u30b9\u30bf\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u6210\u3057\u3066\u3001\u305d\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u300c<strong>\/About<\/strong>\u300d\u30da\u30fc\u30b8\u3092\u8868\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre>&gt; layouts\/custom.vue\r\n&lt;template&gt;\r\n  &lt;div&gt;\r\n    &lt;h1&gt;This our custom layout&lt;\/h1&gt;\r\n    &lt;slot \/&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&gt; pages\/about.vue\r\n&lt;template&gt;\r\n  &lt;p&gt;About Page&lt;\/p&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\ndefinePageMeta({\r\n  layout: 'custom',\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7746 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07135628\/page-about.png\" alt=\"\" width=\"1428\" height=\"135\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07135628\/page-about.png 1428w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07135628\/page-about-300x28.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07135628\/page-about-1024x97.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07135628\/page-about-768x73.png 768w\" sizes=\"auto, (max-width: 1428px) 100vw, 1428px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Routing<\/strong><\/h3>\n<h4>\u52d5\u7684\u30eb\u30fc\u30c8<\/h4>\n<p>\u3067\u306f\u3001Nuxt \u30d5\u30a1\u30a4\u30eb\u306b\u57fa\u3065\u304f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u4f7f\u3063\u3066\u30eb\u30fc\u30c8\u3092\u4f5c\u6210\u3059\u308b\u69d8\u3005\u306a\u65b9\u6cd5\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7739 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06181322\/structure-pages.png\" alt=\"\" width=\"172\" height=\"226\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u4ee5\u4e0b\u306e\u4f8b\u3067\u306f\u3001\u300c<strong>~\/<\/strong><strong>pages\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u69cb\u9020\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u5185\u5bb9\u304c\u30eb\u30fc\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u306b\u57fa\u3065\u3044\u3066\u53ef\u5909\u3059\u308b\u52d5\u7684\u30da\u30fc\u30b8\u3068\u9759\u7684\u30da\u30fc\u30b8\u306e2\u7a2e\u985e\u306e\u30da\u30fc\u30b8\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<ol>\n<li>\u9759\u7684\u30da\u30fc\u30b8\n<ul>\n<li>index.vue \u2192 \/<\/li>\n<li>about.vue \u2192 \/about<\/li>\n<li>category\/index.vue \u2192 \/category<\/li>\n<\/ul>\n<\/li>\n<li>\u52d5\u7684\u30da\u30fc\u30b8\n<ul>\n<li>category\/[slug].vue \u2192 \/category\/language<\/li>\n<li>user-[group]\/[id].vue \u2192 \/user-admin\/123<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<pre>&gt; pages\/category\/[slug].vue\r\n&lt;template&gt;\r\n  &lt;p&gt;Category slug : {{ $route.params.slug  }}&lt;\/p&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\nconst route = useRoute();\r\nuseHead({\r\n  title: `Category ${route.params.slug}`\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7743 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06181711\/routing-category-slug.png\" alt=\"\" width=\"1470\" height=\"225\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06181711\/routing-category-slug.png 1470w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06181711\/routing-category-slug-300x46.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06181711\/routing-category-slug-1024x157.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/06181711\/routing-category-slug-768x118.png 768w\" sizes=\"auto, (max-width: 1470px) 100vw, 1470px\" \/><\/p>\n<p>&nbsp;<\/p>\n<pre>&gt; pages\/user-[group]\/[id].vue\r\n&lt;template&gt;\r\n  &lt;p&gt;Group : {{ $route.params.group }} - ID : {{ $route.params.id }}&lt;\/p&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\nconst route = useRoute();\r\nuseHead({\r\n  title: `User group ${route.params.group} ID ${route.params.id}`\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7752 size-full aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154241\/routing-user-group-id.png\" alt=\"\" width=\"1432\" height=\"227\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154241\/routing-user-group-id.png 1432w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154241\/routing-user-group-id-300x48.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154241\/routing-user-group-id-1024x162.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154241\/routing-user-group-id-768x122.png 768w\" sizes=\"auto, (max-width: 1432px) 100vw, 1432px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4><strong><span class=\"notion-enable-hover\" data-token-index=\"0\">\u30cd\u30b9\u30c8\u30eb\u30fc\u30c8<\/span><\/strong><\/h4>\n<p>\u3053\u308c\u306f\u3001\u89aa\u30eb\u30fc\u30c8\u304c\u5b50\u30eb\u30fc\u30c8\u307e\u305f\u306f\u30b5\u30d6\u30eb\u30fc\u30c8\u3092\u6301\u3064\u968e\u5c64\u578b\u3067\u8868\u793a\u3055\u308c\u308b\u30da\u30fc\u30b8\u306e\u69cb\u9020\u3067\u3059\u3002\u5404\u30da\u30fc\u30b8\u304c\u5171\u901a\u30ec\u30a4\u30a2\u30a2\u30a6\u30c8\u3092\u5171\u7528\u3057\u3001\u307e\u305f\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5185\u3067\u306e\u30eb\u30fc\u30c8\u3092\u30cd\u30b9\u30c8\u3059\u308b\u3088\u3046\u6574\u7406\u3057\u305f\u3044\u5834\u5408\u306b\u5f79\u306b\u7acb\u3061\u307e\u3059\u3002&lt;NuxtPage&gt; \u3092\u4f7f\u7528\u3057\u3066\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30eb\u30fc\u30c8\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7753 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154348\/structure-nested-pages.png\" alt=\"\" width=\"234\" height=\"395\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154348\/structure-nested-pages.png 234w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154348\/structure-nested-pages-178x300.png 178w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07154348\/structure-nested-pages-148x250.png 148w\" sizes=\"auto, (max-width: 234px) 100vw, 234px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u306f\u6b21\u306e\u3088\u3046\u306a\u30eb\u30fc\u30c8\u3092\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre>[\r\n  {\r\n    path: '\/user',\r\n    component: '~\/pages\/user.vue',\r\n    name: 'user',\r\n    children: [\r\n      {\r\n        path: '\/',\r\n        component: '~\/pages\/user\/index.vue',\r\n        name: 'user-child'\r\n      },\r\n      {\r\n        path: '\/:id',\r\n        component: '~\/pages\/user\/[id].vue',\r\n        name: 'user-id',\r\n\tchildren: [\r\n\t   {\r\n\t     path: '\/profile',\r\n\t     component: '~\/pages\/user\/[id]\/profile.vue',\r\n\t     name: 'user-id-profile'\r\n\t   },\r\n\t   {\r\n\t     path: '\/division',\r\n\t     component: '~\/pages\/user\/[id]\/division\/index.vue',\r\n\t     name: 'user-id-division',\r\n\t     children: [\r\n\t\t{\r\n\t\t  path: '\/:division\/:divisionId',\r\n\t\t  component: '~\/pages\/user\/[id]\/division\/[division]\/[divisionId].vue',\r\n\t\t  name: 'user-id-division-id'\r\n\t\t}\r\n\t     ]\r\n\t   },\r\n\t ]\r\n      }\r\n    ]\r\n  }\r\n]\r\n<\/pre>\n<p>\u30e6\u30fc\u30b6\u30fc\u30eb\u30fc\u30c8\u3068\u5b50\u30eb\u30fc\u30c8\u306e\u7d50\u679c\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>&gt; pages\/user.vue\r\n&lt;template&gt;\r\n  &lt;p&gt;User Page&lt;\/p&gt;\r\n  &lt;NuxtPage \/&gt;\r\n&lt;\/template&gt;\r\n\r\n&gt; pages\/user\/index.vue\r\n&lt;template&gt;\r\n  &lt;p&gt;User Child Page&lt;\/p&gt;\r\n&lt;\/template&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7755 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155153\/routing-nested-user-child.png\" alt=\"\" width=\"1431\" height=\"222\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155153\/routing-nested-user-child.png 1431w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155153\/routing-nested-user-child-300x47.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155153\/routing-nested-user-child-1024x159.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155153\/routing-nested-user-child-768x119.png 768w\" sizes=\"auto, (max-width: 1431px) 100vw, 1431px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u30e6\u30fc\u30b6\u30fc\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u30eb\u30fc\u30c8\u3068\u30e6\u30fc\u30b6\u30fcID\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u306e\u7d50\u679c\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>&gt; pages\/user.vue (parent route)\r\n\r\n&gt; pages\/user\/[id]\/profile\r\n&lt;template&gt;\r\n  &lt;p&gt;User Profile Page - User ID : {{ $route.params.id }}&lt;\/p&gt;\r\n&lt;\/template&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7756 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155428\/routing-nested-user-id-profile-1.png\" alt=\"\" width=\"1432\" height=\"227\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155428\/routing-nested-user-id-profile-1.png 1432w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155428\/routing-nested-user-id-profile-1-300x48.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155428\/routing-nested-user-id-profile-1-1024x162.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155428\/routing-nested-user-id-profile-1-768x122.png 768w\" sizes=\"auto, (max-width: 1432px) 100vw, 1432px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u30e6\u30fc\u30b6\u30fc\u30c7\u30a3\u30d3\u30b8\u30e7\u30f3\u30eb\u30fc\u30c8\u3068\u30e6\u30fc\u30b6\u30fcID\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u306e\u7d50\u679c\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>&gt; pages\/user.vue (parent route)\r\n\r\n&gt; pages\/user\/[id]\/division\/index.vue\r\n&lt;template&gt;\r\n  &lt;p&gt;User ID : {{ $route.params.id }}&lt;\/p&gt;\r\n  &lt;p&gt;User division : {{ $route.params.division }}&lt;\/p&gt;\r\n&lt;\/template&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7757 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155551\/routing-nested-user-id-division.png\" alt=\"\" width=\"1431\" height=\"282\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155551\/routing-nested-user-id-division.png 1431w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155551\/routing-nested-user-id-division-300x59.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155551\/routing-nested-user-id-division-1024x202.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155551\/routing-nested-user-id-division-768x151.png 768w\" sizes=\"auto, (max-width: 1431px) 100vw, 1431px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u30e6\u30fc\u30b6\u30fc\u30c7\u30a3\u30d3\u30b8\u30e7\u30f3\u30eb\u30fc\u30c8\u3068\u30e6\u30fc\u30b6\u30fcID\u3068\u30c7\u30a3\u30d3\u30b8\u30e7\u30f3ID\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u306e\u7d50\u679c\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>&gt; pages\/user.vue (parent route)\r\n\r\n&gt; pages\/user\/[id]\/division\/[division]\/[divisionId].vue\r\n&lt;template&gt;\r\n  &lt;p&gt;User ID : {{ $route.params.id }}&lt;\/p&gt;\r\n  &lt;p&gt;User division : {{ $route.params.division }} - Division ID : {{ $route.params.divisionId }}&lt;\/p&gt;\r\n&lt;\/template&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7758 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155723\/routing-nested-user-id-division-divisionId.png\" alt=\"\" width=\"1432\" height=\"272\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155723\/routing-nested-user-id-division-divisionId.png 1432w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155723\/routing-nested-user-id-division-divisionId-300x57.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155723\/routing-nested-user-id-division-divisionId-1024x195.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155723\/routing-nested-user-id-division-divisionId-768x146.png 768w\" sizes=\"auto, (max-width: 1432px) 100vw, 1432px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3<\/h3>\n<p>\u3053\u308c\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5185\u306e\u7570\u306a\u308b\u30da\u30fc\u30b8\u307e\u305f\u306f\u30eb\u30fc\u30c8\u9593\u3092\u9077\u79fb\u3059\u308b\u30d7\u30ed\u30bb\u30b9\u3067\u3059\u3002 Nuxt\u306f\u3001&lt;NuxtLink&gt;\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3063\u3066\u3001href \u5c5e\u6027\u3092\u6301\u3064 &lt;a&gt; \u30bf\u30b0\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u30da\u30fc\u30b8\u306e\u30eb\u30fc\u30c8\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u30da\u30fc\u30b8\u3092\u9023\u7d50\u3057\u307e\u3059\u3002<\/p>\n<pre>&gt; pages\/index.vue\r\n&lt;template&gt;\r\n  &lt;div&gt;\r\n    &lt;p&gt;Home Page&lt;\/p&gt;\r\n    &lt;nav&gt;\r\n      &lt;ul&gt;\r\n        &lt;li&gt;&lt;NuxtLink to=\"\/about\"&gt;About&lt;\/NuxtLink&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;NuxtLink to=\"\/category\"&gt;Category&lt;\/NuxtLink&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;NuxtLink to=\"\/user\"&gt;User&lt;\/NuxtLink&gt;&lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n    &lt;\/nav&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;style scoped&gt;\r\na {\r\n  text-decoration: none;\r\n  line-height: 1.5em;\r\n  color: #0e0d0d;\r\n  font-weight: 600;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<p>\u300cAbout\u300d\u3001\u300cCategory\u300d\u3001\u300cUser\u300d\u306e\u5404\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u305d\u308c\u305e\u308c\u3067\u8a72\u5f53\u30da\u30fc\u30b8\u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7759 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155923\/navigation.png\" alt=\"\" width=\"1432\" height=\"292\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155923\/navigation.png 1432w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155923\/navigation-300x61.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155923\/navigation-1024x209.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07155923\/navigation-768x157.png 768w\" sizes=\"auto, (max-width: 1432px) 100vw, 1432px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&lt;NuxtLink&gt;\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3001\u4ee5\u4e0b\u306e\u4e8c\u3064\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6301\u3064\u30d1\u30e9\u30e1\u30fc\u30bf\u30fcProps\u300cto\u300d\u3068\u4f7f\u3044\u307e\u3059\u3002<\/p>\n<ol>\n<li>name\uff1a\u30da\u30fc\u30b8\u540d\u3067\u3042\u308a\u3001\u8a72\u5f53\u3059\u308b\u30eb\u30fc\u30c8\u3067\u3082\u3042\u308b\u3002\u4f8b\uff1apages\/category\/[slug].vue \u2192 \/category\/:slug \u21d2 \u5b50\u30d5\u30a9\u30eb\u30c0\u30fc\u9593\u306b\u300c-\u300d\u3092\u5165\u308c\u308b\u5f62\u3067\u547d\u540d\u3059\u308b\u306e\u3067\u3001category-slug\u306b\u306a\u308b\u3002<\/li>\n<li>params\uff1a\u52d5\u7684\u30eb\u30fc\u30c8\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306e\u5f15\u6e21\u3059\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc<\/li>\n<\/ol>\n<pre>&gt; pages\/category\/index.vue\r\n&lt;template&gt;\r\n  &lt;p&gt;Category Page&lt;\/p&gt;\r\n  &lt;nav&gt;\r\n    &lt;ul v-for=\"(cate, index) in categories\" :key=\"index\"&gt;\r\n      &lt;li&gt;\r\n        &lt;NuxtLink :to=\"{ name: 'category-slug', params: { slug: cate } }\"&gt;\r\n          {{ cate }}\r\n        &lt;\/NuxtLink&gt;\r\n      &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/nav&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\nconst categories = ['language', 'reading', 'programming', 'art', 'other'];\r\n&lt;\/script&gt;\r\n\r\n&lt;style scoped&gt;\r\na {\r\n  text-decoration: none;\r\n  line-height: 1.5em;\r\n  color: #0e0d0d;\r\n  font-weight: 600;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h3>\u30a2\u30bb\u30c3\u30c8<\/h3>\n<ol>\n<li>\u300c<strong>public\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u5185\u5bb9\u306f\u30b5\u30fc\u30d0\u30fc\u30eb\u30fc\u30c8\u3067\u63d0\u4f9b\u3055\u308c\u307e\u3059\u3002<\/li>\n<li>\u300c<strong>assets\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306f\u3001\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\uff08Vite\u307e\u305f\u306fwebpack\uff09\u306e\u51e6\u7406\u3059\u308b\u3059\u3079\u3066\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ol>\n<p><strong>\u300cpublic\/\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/strong><\/p>\n<p>\u4f8b\u3048\u3070\u3001\u300c<strong>public\/img\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3042\u308b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306b\u95a2\u9023\u3057\u3066\u3001\u9759\u7684\u306aURL\u300c\/img\/nuxt.png\u300d\u304c\u5229\u7528\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<pre>&lt;template&gt;\r\n  &lt;img src=\"\/img\/nuxt.png\" alt=\"Discover Nuxt 3\" \/&gt;\r\n&lt;\/template&gt;<\/pre>\n<p><strong>\u300cassets\/\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/strong><\/p>\n<blockquote><p><span style=\"color: #ff0000;\"><em>Nuxt\u306f\u300c\/assets\/my-file.png\u300d\u7b49\u306e\u9759\u7684URL\u3067\u300cassets\/\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u305b\u3093\u3002\u9759\u7684URL\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u300cpublic\/\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/em><\/span><\/p><\/blockquote>\n<p>\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\uff08CSS\u3001SASS\u306a\u3069\uff09\u3001\u30d5\u30a9\u30f3\u30c8\u3001\u307e\u305f\u306fSVG\u30d5\u30a1\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30b0\u30ed\u30fc\u30d0\u30eb\u30b3\u30de\u30f3\u30c9\u3092Nuxt\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u633f\u5165\u3059\u308b\u306b\u306f\u3001nuxt.config\u30d5\u30a1\u30a4\u30eb\u306eVite\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u4f7f\u3048\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u4f8b\u3092\u898b\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre>&gt; assets\/css\/styles.css\r\na {\r\n  text-decoration: none;\r\n  line-height: 1.5em;\r\n  color: #0e0d0d;\r\n  font-weight: 600;\r\n}\r\n\r\n&gt; assets\/sass\/_colors.scss\r\n$primary: #49240F;\r\n$secondary: #E4A79D;\r\n\r\n&gt; assets\/sass\/app.scss\r\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap\");\r\nbody {\r\n  font-family: 'Nunito',\r\n}\r\n.btn-bg-color {\r\n  background-color: $primary;\r\n}\r\n\r\n&gt; nuxt.config.ts\r\nexport default defineNuxtConfig({\r\n  css: [\r\n    '~\/assets\/css\/styles.css',\r\n    '~\/assets\/sass\/app.scss',\r\n  ],\r\n  vite: {\r\n    css: {\r\n      preprocessorOptions: {\r\n        scss: {\r\n          additionalData: '@use \"@\/assets\/sass\/_colors.scss\" as *;'\r\n        }\r\n      }\r\n    }\r\n  }\r\n})<\/pre>\n<p>&nbsp;<\/p>\n<h3>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h3>\n<p>\u300c<strong>components\/<\/strong>\u300d\u30d5\u30a9\u30eb\u30c0\u306f\u3001\u30da\u30fc\u30b8\u3084\u4ed6\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u53d6\u308a\u8fbc\u307e\u308c\u308b\u5168\u3066\u306eVue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u914d\u7f6e\u3059\u308b\u5834\u6240\u3067\u3059\u3002<br \/>\nNuxt\u306f\u3001\u300c<strong>components\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08\u4f7f\u7528\u3057\u3066\u3044\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u3088\u3063\u3066\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3082\u542b\u3081\uff09\u3092\u81ea\u52d5\u7684\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p>\u3055\u3089\u306b\u3001Nuxt\u306b\u306f&lt; ClientOnly &gt;\u3001&lt; NuxtPage &gt;\u3001&lt; NuxtLayout &gt;\u3001&lt; NuxtLink &gt;\u3001&lt; Teleport &gt;\u306a\u3069\u306e\u7d44\u307f\u8fbc\u307f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre>&gt; components\r\n--| BaseHeader.vue\r\n--| BaseFooter.vue\r\n--| base\/\r\n----| html\/\r\n------| Alert.vue\r\n\r\n&gt; layouts\/default.vue\r\n&lt;template&gt;\r\n  &lt;div&gt;\r\n    &lt;BaseHeader \/&gt;\r\n    &lt;BaseHtmlAlert \/&gt;\r\n    &lt;slot \/&gt;\r\n    &lt;BaseFooter \/&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h3>\u30b3\u30f3\u30dd\u30fc\u30b6\u30d6\u30eb<\/h3>\n<p>Nuxt\u306fuseAppConfig\u3001useAsyncData\u3001useCookie\u3001useError\u3001useFetch\u3001useHead\u306a\u3069\u306e\u30b3\u30f3\u30dd\u30fc\u30b6\u30d6\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u307e\u305f\u3001Nuxt\u306f\u81ea\u52d5\u30a4\u30f3\u30dd\u30fc\u30c8\u6a5f\u80fd\u3092\u4f7f\u3063\u3066\u300c<strong>composables<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u81ea\u52d5\u7684\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>\u30d7\u30e9\u30b0\u30a4\u30f3 <\/strong><\/h3>\n<p>Nuxt \u306f\u3001\u300c<strong>plugins<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u81ea\u52d5\u7684\u306b\u8aad\u307f\u53d6\u308a\u3001Vue \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210\u6642\u306b\u305d\u308c\u3089\u3092\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u540d\u306b .server \u304b.client\u3068\u3044\u3046\u63a5\u5c3e\u8f9e\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b5\u30fc\u30d0\u30fc\u5074\u307e\u305f\u306f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u306b\u306e\u307f\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002<\/p>\n<blockquote><p><span style=\"color: #ff0000;\"><em>\u300cplugins\/\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u3059\u3079\u3066\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u81ea\u52d5\u7684\u306b\u767b\u9332\u3055\u308c\u308b\u305f\u3081\u3001nuxt.config \u306b\u500b\u5225\u306b\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/em><\/span><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h3>\u30e2\u30b8\u30e5\u30fc\u30eb<\/h3>\n<p>Nuxt\u306f\u3001\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306e\u958b\u767a\u3057\u305f\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u30ea\u30b9\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b\u6642\u306e\u9078\u629e\u80a2\u304c\u591a\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7761 aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07160511\/modules.png\" alt=\"\" width=\"276\" height=\"867\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07160511\/modules.png 276w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07160511\/modules-80x250.png 80w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5fc5\u8981\u306a\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001nuxt.config.ts\u30d5\u30a1\u30a4\u30eb\u3067\u69cb\u6210\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre>export default defineNuxtConfig({\r\n  modules: [\r\n    '@vueuse\/nuxt',\r\n    '@element-plus\/nuxt',\r\n    'nuxt-lodash',\r\n    'nuxt-security',\r\n  ]\r\n})<\/pre>\n<p>Nuxt\u306f\u3001\u30ab\u30b9\u30bf\u30e0\u30d5\u30a1\u30a4\u30eb\u306b\u3064\u3044\u3066\u958b\u59cb\u524d\u306b\u300c<strong>modules\/<\/strong>\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u30b9\u30ad\u30e3\u30f3\u3057\u3066\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u69cb\u7bc9\u4e2d\u306b\u958b\u767a\u3057\u305f\u30ed\u30fc\u30ab\u30eb\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u914d\u7f6e\u3059\u308b\u306e\u306b\u9069\u3057\u305f\u5834\u6240\u3067\u3059\u3002<\/p>\n<pre>modules\/*\/*.ts\r\nmodules\/*.ts<\/pre>\n<p>&nbsp;<\/p>\n<h3>\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u30f3\u30b0<\/h3>\n<p>Nuxt 3\u3067\u306f\u3001useFetch\u3001useLazyFetch\u3001useAsyncData\u3001useLazyAsyncData\u3001$fetch \u306a\u3069\u306e\u30d6\u30e9\u30a6\u30b6\u307e\u305f\u306f\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30c7\u30fc\u30bf\u3092\u30d5\u30a7\u30c3\u30c1\u3059\u308b\u305f\u3081\u306e\u30b3\u30f3\u30dd\u30fc\u30b6\u30d6\u30eb\u3068\u7d44\u307f\u8fbc\u307f\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u6b86\u3069\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u307e\u3059\u3002<\/p>\n<p><strong>useFetch<\/strong><\/p>\n<p>useFetch\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u5074\uff08Nuxt\u306e\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30e2\u30fc\u30c9\u3067\uff09\u3067\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u3001Nuxt\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u30c7\u30fc\u30bf\u3092\u30ed\u30fc\u30c9\u3059\u308b\u305f\u3081\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002 useFetch\u306f\u3001\u30da\u30fc\u30b8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u307e\u305f\u306f\u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u3082\u4f7f\u3048\u307e\u3059\u3002useFetch\u306e\u4f7f\u7528\u65b9\u6cd5\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u975e\u5e38\u306b\u7c21\u5358\u3067\u3059\u3002<\/p>\n<pre>&lt;template&gt;\r\n  &lt;div&gt;\r\n\tPage visits: {{ count }}\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\nconst { data: count } = await useFetch('\/api\/count');\r\n&lt;\/script&gt;<\/pre>\n<p>\u30aa\u30d7\u30b7\u30e7\u30f3<\/p>\n<ol>\n<li>method\uff1a\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30e1\u30bd\u30c3\u30c9<\/li>\n<li>query\uff1a\u30ea\u30af\u30a8\u30b9\u30c8\u3078\u306e\u30af\u30a8\u30ea\u8ffd\u52a0<\/li>\n<li>params\uff1a\u30af\u30a8\u30ea\u306e\u5225\u540d<\/li>\n<li>body\uff1a\u30ea\u30af\u30a8\u30b9\u30c8\u30dc\u30c7\u30a3<\/li>\n<li>headers\uff1a\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0<\/li>\n<li>baseURL\uff1a\u30d9\u30fc\u30b9URL<\/li>\n<li>key\uff1a\u30ad\u30e3\u30c3\u30b7\u30e5\u306b\u4fdd\u6301\u3059\u308b\u30c7\u30fc\u30bf\u3068\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u52d5\u4f5c\u3092\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3059\u308b\u4e00\u610f\u306e\u5024<\/li>\n<li>server\uff1a\u30b5\u30fc\u30d0\u30fc\u4e0a\u306e\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u306e\u6709\u7121\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u306ftrue)<\/li>\n<li>default\uff1a\u5bfe\u8c61\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u6307\u5b9a<\/li>\n<li>pick\uff1a\u5bfe\u8c61\u30c7\u30fc\u30bf\u304b\u3089\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u62bd\u51fa<\/li>\n<li>watch\uff1a\u5bfe\u8c61\u306e\u5909\u66f4\u3092\u30d2\u30a2\u30ea\u30f3\u30b0\u3057\u3066\u306euseFetch\u518d\u5ea6\u547c\u51fa<\/li>\n<li>transform\uff1a\u51fa\u529b\u5909\u63db\u306e\u305f\u3081\u4f7f\u7528<\/li>\n<li>immediate\uff1afalse\u306b\u8a2d\u5b9a\u3059\u308b\u3068\u3001useFetch\u3092\u76f4\u3061\u306b\u30c8\u30ea\u30ac\u30fc\u3057\u306a\u304f\u306a\u308b\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u306ftrue\uff09<\/li>\n<\/ol>\n<p>\u623b\u308a\u5024<\/p>\n<ol>\n<li>data\uff1auseFetch\u306eAPI\u304b\u3089\u547c\u3073\u51fa\u3057\u305f\u30c7\u30fc\u30bf<\/li>\n<li>pending\uff1auseFetch\u304c\u5f15\u304d\u7d9a\u304d\u547c\u3073\u51fa\u3055\u308c\u308b\u304b\u3069\u3046\u304b\u306e\u72b6\u614b\uff08true\/false\uff09<\/li>\n<li>refresh\/execute\uff1auseFetch\u306e\u5916\u90e8\u3067\u547c\u3073\u51fa\u3066\u30c7\u30fc\u30bf\u3092\u30d5\u30a7\u30c3\u30c1\u3057\u76f4\u3059\u95a2\u6570<\/li>\n<li>error\uff1aAPI\u547c\u3073\u51fa\u3048\u3089\u30fc\u6642\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30a8\u30e9\u30fc<\/li>\n<\/ol>\n<p>\u4ee5\u4e0b\u306b\u3001\u4e0a\u8a18\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u305f\u4f8b\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n<pre>const { data, pending, error, refresh } = await useFetch('https:\/\/api.nuxtjs.dev\/mountains',{\r\n    pick: ['title'],\r\n    query: { param1, param2: 'value2' }\r\n})\r\nconst refreshData = () =&gt; refresh();<\/pre>\n<p>\u3053\u306e\u4f7f\u7528\u65b9\u6cd5\u306f\u3001\u300c<a href=\"https:\/\/api.nuxtjs.dev\/mountains?param1=value1&amp;param2=value2\">https:\/\/api.nuxtjs.dev\/mountains?param1=value1&amp;param2=value2<\/a>\u300d\u3068\u3044\u3046URL\u304b\u3089\u8fd4\u3055\u308c\u308b\u914d\u5217\u306e\u8981\u7d20\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u8fd4\u5374\u3057\u3001refreshData\u95a2\u6570\u3067useFetch\u3092\u518d\u5ea6\u547c\u3073\u51fa\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>useAsyncData<\/strong><\/p>\n<p>useFetch\u3067\u306f\u3001useFetch\u306b\u5f15\u6e21\u3059\u9577\u3044URL\u304c\u591a\u304f\u306e\u5834\u6240\u306b\u4f7f\u7528\u3055\u308c\u308b\u5834\u5408\u3001\u7ba1\u7406\u3057\u306b\u304f\u304f\u306a\u308a\u307e\u3059\u3002\u901a\u5e38\u306fAPI\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u3001\u305d\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u30d5\u30a1\u30a4\u30eb\u3078\u306e API\u547c\u51fa\u95a2\u6570\u3092\u4f5c\u6210\u3057\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u30da\u30fc\u30b8\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\u3053\u306e\u3084\u308a\u65b9\u3067\u306f\u3001useFetch\u3092\u5229\u7528\u3067\u304d\u306a\u3044\u306e\u3067\u3001\u4ee3\u308f\u308a\u306b\u3001useFetch\u3068\u307b\u307c\u540c\u3058useAsyncData\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n<pre>&lt;template&gt;\r\n  &lt;div&gt;\r\n\t\tPage visits: {{ data }}\r\n\t&lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\n\tconst { data } = await useAsyncData('count', () =&gt; $fetch('\/api\/count'));\r\n&lt;\/script&gt;<\/pre>\n<p>\u4f8b\u3048\u3070\u3001\u4ee5\u4e0b\u306e\u95a2\u6570\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre>export const getPosts = () =&gt; axios.get('\/api\/posts');<\/pre>\n<p>useAsyncData\u3092\u5229\u7528\u3059\u308b\u306b\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre>const { data } = await useAsyncData('projectSearch', () =&gt; getPosts());<\/pre>\n<p>UseAsyncData\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3068\u623b\u308a\u5024\u306fuseFetch\u3068\u540c\u3058\u3067\u3059\u304c\u3001useAsyncData\u304buseFetch\u3092\u4f7f\u3063\u3066\u3082\u3001\u30ad\u30fc\u3092\u8ffd\u52a0\u3057\u3001\u30da\u30fc\u30b8\u3092\u5207\u308a\u66ff\u3048\u308b\u6642\u306buseAsyncData\u307e\u305f\u306fuseFetch\u3092\u518d\u5ea6\u30b3\u30fc\u30eb\u3057\u305f\u3044\u5834\u5408\u306bclearNuxtData\u3092\u5b9f\u65bd\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u4ee5\u4e0b\u306b\u305d\u306e\u4f8b\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n<pre>&lt;script setup&gt;\r\n\tawait clearNuxtData('count');\r\n\tconst { data } = await useAsyncData('count', () =&gt; $fetch('\/api\/count'));\r\n&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>useLazyFetch<\/strong><\/p>\n<p>useLazyFetch\u306e\u5b9f\u88c5\u4ed5\u65b9\u306fuseFetch\u3068\u540c\u3058\u3001\u57fa\u672c\u7684\u306blazy\u30aa\u30d7\u30b7\u30e7\u30f3\u304ctrue\u3068\u6307\u5b9a\u3055\u308c\u305fuseFetch\u306e\u3053\u3068\u3067\u3059\u3002Lazy\u3067\u306f\u3001\u30c7\u30fc\u30bf\u3092\u975e\u540c\u671f\u3067\u8aad\u307f\u53d6\u308a\u3001Nuxt\u306f\u3001\u5f8c\u308d\u306e\u30b3\u30fc\u30c9\u3068\u4e26\u884c\u3057\u3066\u30c7\u30fc\u30bf\u3092\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002 \u305d\u308c\u306b\u5bfe\u3057\u3066\u3001useFetch\u3067\u306f\u3001\u30c7\u30fc\u30bf\u306e\u30ed\u30fc\u30c9\u304c\u7d42\u308f\u3063\u305f\u3089\u5f8c\u308d\u306e\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002\u307e\u305f\u3001pending\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u30c7\u30fc\u30bf\u306e\u30ed\u30fc\u30c9\u304c\u7d42\u308f\u3063\u305f\u304b\u3069\u3046\u304b\u3092\u5224\u65ad\u3067\u304d\u307e\u3059\u3002 \u30c7\u30fc\u30bf\u306e\u30ed\u30fc\u30c9\u304c\u7d42\u308f\u3089\u306a\u3044\u6642\u3001pending = true\u3068\u306a\u308a\u3001\u305d\u308c\u4ee5\u5916\u306fpending = true\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>&lt;template&gt;\r\n  &lt;div&gt;\r\n      Page visits: {{ count }}\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\n    const { pending, data: count } = await useLazyFetch('\/api\/count');\r\n&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>useLazyAsyncData<\/strong><\/p>\n<p>useLazyAsyncData\u306flazy\u30aa\u30d7\u30b7\u30e7\u30f3\u304ctrue\u3068\u6307\u5b9a\u3055\u308c\u305fuseAsyncData\u306e\u3053\u3068\u3067\u3059\u3002\u5b9f\u88c5\u65b9\u6cd5\u306fuseAsyncData\u3068\u540c\u69d8\u3067\u3059\u3002<\/p>\n<pre>const { pending, data: post } = await useLazyAsyncData('post', () =&gt; getPosts());<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>$fetch<\/strong><\/p>\n<p>Nuxt\u306f\u3001<a href=\"https:\/\/github.com\/unjs\/ofetch\">ofetch<\/a>\u3092\u4f7f\u3063\u3066\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u306a\u53ef\u8996\u6027\u3092$fetch\u30d8\u30eb\u30d1\u30fc\u3067\u5b9f\u73fe\u3057\u3066\u3001Vue\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u307e\u305f\u306fAPI\u30eb\u30fc\u30c8\u306eHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c7\u30fc\u30bf\u3092\u30d5\u30a7\u30c3\u30c1\u3059\u308b\u6642\u306b\u30c7\u30fc\u30bf\u3092\u4e8c\u91cd\u30d5\u30a7\u30c3\u30c1\u3059\u308b\u3053\u3068\u3092\u9632\u3050\u305f\u3081\u306b\u3001useFetch\u307e\u305f\u306fuseAsyncData \u3092$fetch\u3068\u4e00\u7dd2\u306b\u4f7f\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre>&lt;script setup&gt;\r\n\/\/ SSR\u4e2d\u306b\u3001\u30c7\u30fc\u30bf\u306f\u30b5\u30fc\u30d0\u30fc\u3068\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u4e21\u65b9\u3067\u30d5\u30a7\u30c3\u30c1\u3055\u308c\u3066\u4e8c\u91cd\u30d5\u30a7\u30c3\u30c1\u3068\u306a\u308a\u307e\u3059\u3002\r\nconst dataTwice = await $fetch('\/api\/item')\r\n\/\/ SSR\u4e2d\u306b\u3001\u30c7\u30fc\u30bf\u306f\u30b5\u30fc\u30d0\u30fc\u3067\u30d5\u30a7\u30c3\u30c1\u3055\u308c\u3066\u304b\u3089\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3078\u9001\u4fe1\u3055\u308c\u307e\u3059\u3002\r\nconst { data } = await useAsyncData('item', () =&gt; $fetch('\/api\/item'))\r\n\/\/ useFetch\u306fuseAsyncData\u3068$fetch\u306e\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002\r\nconst { data } = await useFetch('\/api\/item')\r\n&lt;\/script&gt;<\/pre>\n<p>$fetch\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u306e\u307f\u5b9f\u884c\u3055\u308c\u308b\u4efb\u610f\u306e\u30e1\u30bd\u30c3\u30c9\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre>&lt;template&gt;\r\n  &lt;button @click=\"contactForm\"&gt;Contact&lt;\/button&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\nfunction contactForm() {\r\n  $fetch('\/api\/contact', {\r\n    method: 'POST',\r\n    body: { hello: 'world '}\r\n  })\r\n}\r\n&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h3>Server<\/h3>\n<p>Nuxt\u306f\u3001\u300c<strong>~\/server\/api<\/strong>\u300d\u3001\u300c<strong>~\/server\/routes<\/strong>\u300d\u3001\u300c<strong>~\/server\/middleware<\/strong>\u300d\u306e\u5404\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u81ea\u52d5\u7684\u306b\u30b9\u30ad\u30e3\u30f3\u3057\u3066API\u30cf\u30f3\u30c9\u30e9\u30fc\u3068\u30b5\u30fc\u30d0\u30fc\u30cf\u30f3\u30c9\u30e9\u30fc\u3092HMR\u306e\u30b5\u30dd\u30fc\u30c8\u3067\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n<p>\u4f8b\uff1a\/server\/api\/hello.ts\u3067\/api\/hello\u30eb\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre>&gt; server\/api\/hello.ts\r\nexport default defineEventHandler((event) =&gt; {\r\n  return {\r\n    hello: 'world'\r\n  }\r\n})\r\n\r\n&gt; pages\/hello.vue\r\n&lt;template&gt;\r\n  &lt;pre&gt;{{ data }}&lt;\/pre&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script setup&gt;\r\n  const { data } = await useFetch('\/api\/hello');\r\n&lt;\/script&gt;<\/pre>\n<p>\u51e6\u7406\u3059\u308b\u30d5\u30a1\u30a4\u30eb\u540d\u306b\u306f\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u306eHTTP\u30e1\u30bd\u30c3\u30c9\u306b\u4e00\u81f4\u3059\u308b\u3088\u3046\u306b .get\u3001.post\u3001.put\u3001.delete\u3068\u3044\u3063\u305f\u63a5\u5c3e\u8f9e\u3092\u4ed8\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre>&gt; server\/api\/test.get.ts\r\nexport default defineEventHandler(() =&gt; 'Test get handler')\r\n\r\n&gt; server\/api\/test.post.ts\r\nexport default defineEventHandler(() =&gt; 'Test post handler')<\/pre>\n<p>Body\u3092\u4f7f\u3063\u305f\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3057\u307e\u3059\u3002<\/p>\n<pre>&gt; server\/api\/submit.post.ts\r\nexport default defineEventHandler(async (event) =&gt; {\r\n    const body = await readBody(event)\r\n    return { body }\r\n})<\/pre>\n<p>\u30af\u30a8\u30ea\u3092\u4f7f\u3063\u305f\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3057\u307e\u3059\u3002<\/p>\n<pre>&gt; server\/api\/search.ts\r\n\/\/ \u30af\u30a8\u30ea\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\uff1a \/api\/search?param1=a&amp;param2=b\r\nexport default defineEventHandler((event) =&gt; {\r\n  const query = getQuery(event)\r\n  return { a: query.param1, b: query.param2 }\r\n})<\/pre>\n<p>&nbsp;<\/p>\n<h2><strong>\u7d50\u8ad6<\/strong><\/h2>\n<p>Nuxt\u306e\u65b0\u3057\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u52a0\u3048\u3066\u3001Vue.js\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u304c\u6210\u9577\u3057\u3066\u3044\u308b\u3053\u3068\u3068 Vue.js\u304a\u3088\u3073Nuxt\u3092\u4f7f\u3046\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u304c\u4e2d\u6838\u6280\u8853\u306e\u5f37\u307f\u306b\u9b45\u4e86\u3055\u308c\u305f\u3053\u3068\u306b\u3088\u308a\u3001\u8c4a\u5bcc\u3067\u591a\u69d8\u306a\u53c2\u8003\u8cc7\u6599\u304c\u51fa\u73fe\u3057\u307e\u3059\u3002<\/p>\n<p><strong>\u30e1\u30ea\u30c3\u30c8<\/strong><\/p>\n<ol>\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5411\u4e0a<\/li>\n<li>\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584<\/li>\n<li>\u67d4\u8edf\u306a\u30e2\u30b8\u30e5\u30e9\u30fc\u578b\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3<\/li>\n<li>Typescript\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3001\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u306e\u30b5\u30dd\u30fc\u30c8\u5f37\u5316<\/li>\n<li>SEO\u6700\u9069\u5316<\/li>\n<li>Vue 3\u3068\u306e\u7d71\u5408\u5316<\/li>\n<li>\u8907\u96d1\u306a\u8a2d\u5b9a\u306e\u524a\u6e1b<\/li>\n<\/ol>\n<p><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong><\/p>\n<ol>\n<li>\u521d\u5fc3\u8005\u306e\u5834\u5408\u3001Vue.js\u57fa\u790e\u77e5\u8b58\u3092\u8eab\u306b\u3064\u3051\u308b\u3053\u3068<\/li>\n<li>Nuxt\u306e\u6a19\u6e96\u306e\u30d5\u30a9\u30eb\u30c0\u69cb\u9020\u306b\u5f93\u3048\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u30d5\u30a9\u30eb\u30c0\u69cb\u9020\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u308a\u3001\u5916\u90e8\u30c4\u30fc\u30eb\u3084\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u7d71\u5408\u3059\u308b\u6642\u306b\u56f0\u308b\u3053\u3068<\/li>\n<li>Vue.js\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3084\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u4e00\u90e8\u304cNuxt\u3068\u306e\u4e92\u63db\u6027\u304c\u306a\u304f\u3066\u3001\u8ffd\u52a0\u8a2d\u5b9a\u304c\u5fc5\u8981\u306b\u306a\u308b\u3053\u3068<\/li>\n<li>Nuxt\u304c\u8907\u96d1\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u306b\u9069\u3057\u305f\u5f37\u529b\u306a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306a\u306e\u3067\u3001\u7c21\u5358\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3084\u5358\u4e00\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u306b\u4f7f\u3046\u3068\u3001\u7169\u96d1\u306b\u306a\u308a\u30b3\u30b9\u30c8\u3092\u8cbb\u3084\u3059\u3053\u3068<\/li>\n<li>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u304c\u5c0f\u3055\u304f\u3066\u6210\u9577\u3057\u3066\u3044\u304f\u3053\u3068<\/li>\n<\/ol>\n<p>\u4ed6\u306e\u6d41\u884c\u3063\u3066\u3044\u308b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u306e\u6bd4\u8f03\u7d71\u8a08\u2193<\/p>\n<div class=\"mceTemp\">\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7762 size-full aligncenter\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161448\/download-chart-nuxt-next.png\" alt=\"\" width=\"1647\" height=\"581\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161448\/download-chart-nuxt-next.png 1647w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161448\/download-chart-nuxt-next-300x106.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161448\/download-chart-nuxt-next-1024x361.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161448\/download-chart-nuxt-next-768x271.png 768w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161448\/download-chart-nuxt-next-1536x542.png 1536w\" sizes=\"auto, (max-width: 1647px) 100vw, 1647px\" \/><\/p>\n<\/div>\n<p style=\"text-align: center;\">(<a class=\"notion-link-token notion-focusable-token notion-enable-hover\" href=\"https:\/\/npmtrends.com\/\" rel=\"noopener noreferrer\" data-token-index=\"1\"><span class=\"link-annotation-unknown-block-id-1221904394\">https:\/\/npmtrends.com\/<\/span><\/a>)<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7764 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161729\/ratio-rendering-framework.png\" alt=\"\" width=\"1357\" height=\"623\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161729\/ratio-rendering-framework.png 1357w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161729\/ratio-rendering-framework-300x138.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161729\/ratio-rendering-framework-1024x470.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2023\/07\/07161729\/ratio-rendering-framework-768x353.png 768w\" sizes=\"auto, (max-width: 1357px) 100vw, 1357px\" \/><\/p>\n<p style=\"text-align: center;\">(<a class=\"notion-link-token notion-focusable-token notion-enable-hover\" href=\"https:\/\/2022.stateofjs.com\/\" rel=\"noopener noreferrer\" data-token-index=\"1\"><span class=\"link-annotation-unknown-block-id--1884666644\">https:\/\/2022.stateofjs.com\/<\/span><\/a>)<\/p>\n<p>&nbsp;<\/p>\n<h2>\u53c2\u8003\u5143\uff1a<\/h2>\n<p><a href=\"https:\/\/nuxt.com\/\">https:\/\/nuxt.com\/<\/a><\/p>\n<p><a href=\"https:\/\/npmtrends.com\/\">https:\/\/npmtrends.com\/<\/a><\/p>\n<p><a href=\"https:\/\/2022.stateofjs.com\/\">https:\/\/2022.stateofjs.com\/<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>\u306f\u3058\u3081\u306b Nuxt\u306f\u3001Vue.js\u306b\u57fa\u3065\u304f\u516c\u958b\u30bd\u30fc\u30b9\u306eJavaScript\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u4e00\u3064\u3067\u3059\u3002\u73fe\u6642\u70b9\u3067\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u306fNux [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":7713,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[4,71],"tags":[115,116,118],"class_list":["post-7666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-it-tec","tag-nuxt","tag-nuxt3","tag-vuejs"],"_links":{"self":[{"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/posts\/7666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/comments?post=7666"}],"version-history":[{"count":0,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/posts\/7666\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/media\/7713"}],"wp:attachment":[{"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/media?parent=7666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/categories?post=7666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/tags?post=7666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}