見出し画像

Vue3 + TypeScript + Vue RouterからはじめるWebアプリケーション開発

TAAT

Vue3 + TypeScript + Vue Routerを使ったWebアプリケーションの開発環境構築を簡単に紹介します。

インストール

Vue2ではVue CLIでプロジェクトを作成していましたが、Vue3ではViteという高速なビルドツールが使用でき、公式でも推奨しているため、Viteを使います。
※ViteはVue.jsの生みの親であるEvan You氏が開発に携わっているツール

# ViteでVueプロジェクトを初期化する
# - Project name: <プロジェクト名>
# - Select a framework: vue
# - Select a variant: vue-ts
npm init vite@latest

# パッケージをインストール
cd <プロジェクト名>
npm install

# Vue Routerをインストール
npm install vue-router@4

Vue Routerを使う

まずはmain.tsでVueインスタンスにVue Routerを使うための設定を行います。

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'; // router.tsをインポート

const app = createApp(App)
app.use(router) // Vue Routerを使用する
app.mount('#app')

次にrouter.tsでルーティングさせたいページをインポートして、ルーティング設定を追加します。

// router.ts
import { createRouter,createWebHistory } from 'vue-router';
import Home from "./pages/Home.vue";
import Page1 from "./pages/Page1.vue";
import Page2 from "./pages/Page2.vue";
 
const routes = [
    { path: '/', name: 'home', component: Home },
    { path: '/Page1', name: 'page1', component: Page1 },
    { path: '/Page2', name: 'page2', component: Page2 },
]
 
const router = createRouter({
    history: createWebHistory(), // HTML5 History モード
    routes,
})
 
export default router;

そしてルーティングさせたい部分で<router-view>を設置すれば、上で設定したパスにアクセスした時に、対象のページが表示されます。

<template>
    <!-- リンク -->
    <router-link to="/page1">Page1へ遷移</router-link>

    <!-- パスとマッチしたページが表示される -->
    <router-view></router-view>
</template>

コードでページ遷移させたい場合は、useRouterをインポートし、router.push()で遷移させることができます。

<script lang="ts">
import { useRouter } from 'vue-router'

export default {
    setup() {
        const router = useRouter()

        // 例えば、ボタンクリック時にページ遷移させる場合
        const clickButton = () => {
            router.push("/page1");
        }

        return {
            clickButton
        }
    }
}
</script>

デバッグ実行

次のコマンドを実行すると、ローカルサーバーが起動するので、表示されたlocalhostでアクセスすればページが表示されます。

npm run dev

以上が、Vue3 + TypeScript + Vue Routerを使ったWebアプリケーションの簡単な環境構築の方法になります。さらに詳細な使い方を知りたい方は公式サイトをご参照ください。

ちなみに、Nuxt.jsというVue.jsのフレームワークを使えば、自動でルーティングしてくれたり、PWA（Webアプリケーションをスマホアプリのように動作させるもの）対応も簡単にできるので、おすすめです！
※Vue3に対応したNuxt3は現在ベータ版のため、まだ制限がありますが、TypeScriptやVite、Composlition APIなどに対応しているので、試してみるのもいいと思います。


この記事が気に入ったらサポートをしてみませんか？