new Vue がうまくいかない。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

現在VSCodeを使ってコーディングしています。Vue.jsを使おうとして公式のドキュメントに載っていたコードを実行しました。すると次のようなエラーが出て実行できませんでした。

発生している問題・エラーメッセージ

エラーメッセージ

TypeError: Object is not a constructor (evaluating 'new Vue({
// オプション
})')

該当のソースコード

Vue.js

ソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue@next"></script> <title>Document</title> </head> <body> </body> <script> var vm = new Vue({ // オプション }) </script> </html>

試したこと

import Vue from 'vue' を記述したがエラー。
VSCodeにvetur等のextensionsをインストールもしたが変化なし。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答2件

ベストアンサー

すみません、最初に回答した内容は私が間違っていました。
質問者さんが使用しているVue.jsはverが3.xのものみたいで、2.xとはインスタンス作成の方法が変更されてnew Vew()の書き方ができないようです。

以下ご確認ください。
https://v3.ja.vuejs.org/guide/instance.html

おそらく、質問者さんはVueの準備部分はverが3.xのものを見ていて、APIドキュメントは2.xのものを見ているのだと思います。

投稿2021/06/21 18:24

編集2021/06/21 18:26

runnynose

総合スコア497

突っ込みどころが多すぎたので、サンプル作りました^^;
まあ、ホリエモンがHello Worldがプログラミングで一番難しいと言っていました。

このコードとご自身のコードの見比べと、ドキュメントの再度読み直しをしてみてください。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Vue Hello World</title>
8  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
9</head>
10<body>
11    <div id="app">
12        <template>
13          {{ msg }}
14        </template>
15    </div>
16    <script>
17        const App = new Vue({
18        el: '#app',
19        data: {
20          msg: 'Hello World'
21        }
22      });
23    </script>
24</body>
25</html>

投稿2021/06/21 17:27

runnynose

総合スコア497

runnynose

2021/06/21 17:43

根本、使用するライブラリから違います。

kaede0703

2021/06/21 17:54 編集

ご回答いただきありがとうございます。 <script src="https://unpkg.com/vue@next"></script>なぜこれではいけないのでしょうか？公式のドキュメントにプロトタイピングや学習を目的とする場合は、以下のようにして最新バージョンを利用できます: <script src="https://unpkg.com/vue@next"></script> 本番環境では、新しいバージョンによる意図しない不具合を避けるため、特定のバージョン番号とビルド番号にリンクすることをお勧めします。とありました。

runnynose

2021/06/21 18:03

ドキュメントが気になりますね。こちらであっていますか？？ https://jp.vuejs.org/

runnynose

2021/06/21 18:07

あ、すみません。私が間違っていたかも知れないです。 Vueのバージョン3だと以下のURLですね。 https://v3.ja.vuejs.org/ 書き方にそんな変更があったのかな？？

runnynose

2021/06/21 18:31 編集

書き方、かなり変わったみたいでした。 https://v3.ja.vuejs.org/guide/instance.html

kaede0703

2021/06/21 18:36 編集

createAppは調べてみたことがあったのですが、new Vueで作るとばかり思っていたのでわかりませんでした。書き方が変わったんですね。検索してもnew Vueで作るサイトしか見つからなかったので質問してよかったです。本当にありがとうございます。