🎉

画面に組み込む（App.vue）

に公開
Termux
tech

🧩 Vue.jsでPdfViewerコンポーネントをApp.vueに組み込む手順

🧭 前提

あなたのプロジェクト構成が以下のようになっていると仮定します：

my-vue-app/
├── src/
│   ├── components/
│   │   └── PdfViewer.vue
│   ├── App.vue
│   └── main.js
└── package.json

つまり、PdfViewer.vue は src/components の中にあり、
App.vue は src の直下にあります。

🧩 手順①：フォルダを確認

まず、正しいフォルダに移動します。

cd my-vue-app/src

✏️ 手順②：App.vue を開く

vim を使う場合：

vim App.vue

または VS Code で開く場合：

code App.vue

🧠 手順③：App.vue の内容を編集

開いたら、ファイルを以下のように書き換えます👇

<template>
  <div id="app" style="height: 100vh;">
    <PdfViewer />
  </div>
</template>

<script>
import PdfViewer from './components/PdfViewer.vue'
export default {
  components: { PdfViewer }
}
</script>

<style>
/* ここにスタイルを追加してもOK */
</style>

🧩 手順④：変更内容の意味

行 説明
<PdfViewer /> PdfViewer.vue コンポーネントを呼び出して画面に表示します。
import PdfViewer from './components/PdfViewer.vue' コンポーネントを読み込む命令。App.vue から見て、components フォルダの中にあるので ./components/... と指定します。
components: { PdfViewer } App.vue 内で <PdfViewer /> タグを使えるように登録しています。

▶️ 手順⑤：動作確認

プロジェクトのルート（my-vue-app）に戻って、開発サーバーを起動します。

cd ..
npm run dev

または、Yarn を使っている場合：

yarn dev

🌐 手順⑥：ブラウザで確認

ターミナルに以下のような出力が出ます👇

  VITE v5.0.0  ready in 123 ms

  ➜  Local:   http://localhost:5173/

このURLをブラウザで開くと、
PdfViewer コンポーネントの内容（たとえば「PDF Viewer」と書かれた見出しなど）が画面いっぱいに表示されていれば成功です 🎉

✅ トラブルシューティング

症状 確認ポイント
エラー: "Cannot find module './components/PdfViewer.vue'" PdfViewer.vue のファイル名やパスを間違えていないか確認（大文字小文字も重要）
画面が真っ白 ターミナルにエラーメッセージが出ていないか確認
開発サーバーが起動しない npm install で依存関係を再インストールしてみる

これで、PdfViewer コンポーネントを画面（App.vue）に組み込むことができます 🎨

Discussion