Unknown custom element: <transition>と表示される。

Vue.jsにおいて以下のエラーメッセージが出てしまします。

consoleでのエラーメッセージ
1vue.js:1141 [Vue warn]: Unknown custom element: <transition> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>transition_error</title>
6    </head>
7    <body>
8
9        <div id="demo">
10            <button v-on:click="show = !show">
11            Toggle
12            </button>
13            <transition name="fade">
14                <p v-if="show">hello</p>
15            </transition>
16        </div>
17
18        <style>
19            .fade-enter-active, .fade-leave-active {
20                transition: opacity .5s;
21            }
22            .fade-enter, .fade-leave-to  {
23                opacity: 0;
24            }
25        </style>
26
27        <script src="vue.js"></script>
28        <script type="text/javascript">
29            new Vue({
30                el: '#demo',
31                data: {
32                    show: true
33                }
34            });
35        </script>
36    </body>
37</html>

このコードはVue.jsの公式ガイドと同じものです。

最新のVue.jsか確認したのち、<transition></stansition>をコメントアウトして実行してみましたが問題なく動くようなのでやはり<transition>に問題があるのかな？と思います。また、Unknown custom element: <transition>とありますが<transition>はVue.jsが用意してあるデフォルトラッパーコンポーネントだと思いますので、"custom element"というのも不可解です。

最後まで質問を読んで頂きありがとうございます。回答よろしくお願い致します。

minrara

2020/04/03 07:27

その読み込んこんでる、vue.jsファイルはなんですか？どこを参考にして書かれたんでしょうか？

hososo

2020/04/03 07:31

https://jp.vuejs.org/v2/guide/installation.htmlの「開発バージョン」をダウンロードしました。 https://jp.vuejs.org/js/vue.jsです。

minrara

2020/04/03 07:40 編集

ブラウザは何を使用していますか？IE等を使用していると動かない機能がいくつかあります。

hososo

2020/04/03 07:44

Chromeのver.80.0.3987.149です。全ての拡張機能を無効にしてみても同じ症状がでます。

minrara

2020/04/03 07:49

jsファイル読み込みでも動作しました、index.htmlとvue.jsが同じ場所にあるか、ブラウザのキャッシュ等クリアするかぐらいしか思い当たりません。

hososo

2020/04/03 07:54

わざわざ試していただきありがとうございます。おそらく自分の開発環境に問題があるのかもしれません。一度状況を整理して原因を解明してみます。ありがとうございます！

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

回答1件

ベストアンサー

とりあえずメモ帳で書いて作ってみたら正常に動作しました。

index.html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>transition_error</title>
7</head>
8
9<body>
10    <div id="demo">
11        <button v-on:click="show = !show">
12            Toggle
13        </button>
14        <transition name="fade">
15            <p v-if="show">hello</p>
16        </transition>
17    </div>
18
19    <style>
20        .fade-enter-active,
21        .fade-leave-active {
22            transition: opacity .5s;
23        }
24
25        .fade-enter,
26        .fade-leave-to {
27            opacity: 0;
28        }
29    </style>
30    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
31    <script type="text/javascript">
32        new Vue({
33            el: '#demo',
34            data: {
35                show: true
36            }
37        });
38    </script>
39</body>
40
41</html>

投稿2020/04/03 07:30

minrara

総合スコア55

hososo

2020/04/03 07:40

回答ありがとうございます。原因は不明ですが、Vue.jsをダウンロードするのではなく、回答の通りに<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>で読み込むとこちらでも正常に動作しました。ありがとうございます！

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