feat: content/1.vue/1.index.md (#51)

Co-authored-by: kotafujishiro <[email protected]>

content/1.vue/1.index.md

@@ -2,21 +2,21 @@
 ogImage: true
 ---
 
-# Vue Basics
+# Vueの基本
 
-Nuxt integrates [Vue 3](https://vuejs.org/), a progressive framework for building user interfaces. In this section, we will cover the basics of Vue.
+Nuxtは、ユーザーインターフェイスを構築するためのプログレッシブなフレームワークである[Vue 3](https://vuejs.org/)を使用しています。このセクションでは、Vueの基本について説明します。
 
-What you see in the editor is a [Vue Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html)(SFC).
+エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://vuejs.org/guide/scaling-up/sfc.html)（SFC）です。
 
-An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a `.vue` file. It's composed with a [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) block to define the JavaScript logic, a `<template>` block to define the HTML template and optional `<style>` blocks to define the CSS style. You can play with it using the playground on the right, or read more about it in the [official Vue documentation](https://v3.vuejs.org/guide/single-file-component.html).
+SFCは、HTML、CSS、およびJavaScriptを一つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScriptロジックを定義するための[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)ブロック、HTMLテンプレートを定義するための`<template>`ブロック、およびCSSスタイルを定義するためのオプションの`<style>`ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://v3.vuejs.org/guide/single-file-component.html)で詳細を読むことができます。
 
-In Nuxt, we support Vue SFC out-of-the-box and highly recommend you to use it to build your application. One thing that is different from Vue's default Vue SFC is that in Nuxt we [auto-import the Vue utilities](https://nuxt.com/docs/guide/concepts/auto-imports) for you, so you can use `ref`, `computed` and other Vue APIs directly without importing them.
+Nuxtでは、Vue SFCをそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。NuxtがVueのデフォルトのVue SFCと異なる点の一つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports)することです。そのため、`ref`、`computed`などのVue APIを直接インポートせずに使用することができます。
 
 ::note
-**Tips**: You might have heard that there are a few different ways to define a Vue component. In general, we recommend using [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) with [Composition API](https://vuejs.org/guide/introduction.html#composition-api) to get the best developer experience. If you are new to Vue, don't worry too much about understanding all different choices, you can follow what we recommend as we believe it's also the most intuitive way to get started with Vue.
+**ヒント**: Vueコンポーネントを定義する方法はいくつかありますが、一般的には[Composition API](https://vuejs.org/guide/introduction.html#composition-api)を使用した[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vueを初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的にVueを始められるでしょう。
 ::
 
-Going forward, we will cover the following topics:
+今後、以下のトピックについて説明します：
 
 - [Reactivity](/vue/reactivity)
 - [Composition API](/vue/composition-api)