Nuxt.js [Vue is not defined]エラーから進めない

Vue.js
1<template>
2    <div id="main_conteiner">
3        <header>
4        <div id="header">
5            <div class="fl" id="icon">
6                Vuuuuen
7            </div>
8            <div class="fl" id="plus">
9                <img id="button" src="img/plus.png" alt="プラスボタン">
10            </div>
11            <div class="fl" id="menu">
12                {{ menulist.text }}
13                <ul>
14                    <data-component></data-component>
15                </ul>
16            </div>
17        </div>
18    </header>
19
20    <div id="main">
21        <div id="tree" class="fl">
22
23        </div>
24        <div id="panel" class="fl">
25            
26        </div>
27    </div>
28    </div>
29</template>
30
31<script>
32//コンポーネントにデータを持たせる
33//コンポーネントにデータを渡すときには関数にして返り値として渡す必要がある。
34const MenuList = {
35    template: '<li v-for="menu in menulist" :key="menu.id">{{ menu.text }}</li>',
36    data: ()=>{
37        return {
38            menulist: [
39                { id: 1 , text: "受信箱" }
40            ]
41        }
42    }
43}
44new Vue({
45    el: "#menu",
46    components: {
47        'data-component': MenuList
48    }
49});
50</script>
51
52
53<style>
54*{
55    padding: 0;
56    margin: 0;
57    overflow: hidden;
58}
59
60header #header{
61    width: 100%;
62    padding: 12px 0px 8px 20px;
63    background-color: #1D364C;
64}
65#button{
66    cursor: pointer;
67}
68
69#header::after{
70    content: ".";
71    display: block;
72    visibility: hidden;
73    width: 0px;
74    height: 0px;
75    clear: both;
76}
77
78#icon{
79    color: #fff;
80    font-weight: bolder;
81    width: 130px;
82    height: 31px;
83    text-align: center;
84    line-height: 31px;
85
86}
87
88#menu{
89    margin-left: 10px;
90}
91
92#menu > ul > .menu_button{
93    list-style-type: none;
94    margin-left: 10px;
95    color: #ccc;
96    cursor: pointer;
97    line-height: 31px;
98    height: 33px;
99    width: 120px;
100    text-align: center;
101}
102
103#main {
104    width: 100%;
105    overflow: hidden;
106}
107
108#main::after{
109    content: ".";
110    display: block;
111    visibility: hidden;
112    width: 0px;
113    height: 0px;
114    clear: both;
115}
116
117#tree{
118    width: calc(300px - 10px);
119    padding: 10px;
120    height: calc(100vh - 60px - 10px);
121    border-right: 1px solid #1D364C;
122    background: #1D364C;
123    color: #fff;
124}
125#panel{
126    width: calc(100vw - 311px - 20px);
127    padding: 10px;
128    height: calc(100vh - 60px);
129}
130
131#plus img{
132    width: 32px;
133    height: 32px;
134}
135
136.fl{
137    float: left;
138}
139</style>
140

scriptを追加したら見れなくりました。
Vueを初めて2日目、、、あまりわかっていないことも多く使い方が違う可能性もあります。
大目に見てあげてください。

使い方が違う場合、使い方などの説明を頂けましたらとても喜びます。

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

回答1件

ベストアンサー

scriptの使い方がそもそも違います。
NuxtではComponentはcomponentsフォルダ以下に配置します。

pages/index.vue

Vue
1// 上に<template>
2<script>
3import dataComponent from '/component/dataComponent'
4export default {
5    components: {
6        dataComponent
7    }
8}
9</script>
10// 下に<style>

components/dataComponent.vue

Vue
1<template>
2  <li v-for="menu in menulist" :key="menu.id">
3    {{ menu.text }}
4  </li>
5</template>
6<script>
7export default {
8    data() {
9        return {
10            menulist: [
11                { id: 1 , text: "受信箱" }
12            ]
13        }
14    }
15}
16</script>