[{"data":1,"prerenderedAt":1433},["ShallowReactive",2],{"content-\u002Fcontents\u002Fvue_begin":3,"surroundPost-\u002Fcontents\u002Fvue_begin":1424},{"id":4,"title":5,"body":6,"createdAt":1411,"description":71,"draft":1412,"extension":1413,"meta":1414,"navigation":421,"path":1415,"seo":1416,"stem":1417,"tags":1418,"thumbnail":1422,"updatedAt":1411,"__hash__":1423},"contents\u002Fcontents\u002Fvue_begin.md","【VueとNuxt】環境構築とcomponents, layoutsの使い方紹介",{"type":7,"value":8,"toc":1403},"minimark",[9,13,16,19,22,25,38,41,45,48,62,65,98,101,104,131,134,137,158,161,164,241,244,248,257,264,273,277,280,287,290,300,307,311,314,321,699,702,705,711,714,724,732,738,848,854,857,860,864,867,870,873,884,887,1015,1021,1195,1210,1213,1216,1220,1227,1236,1242,1247,1376,1379,1382,1385,1388,1391,1394,1397,1400],[10,11,12],"p",{},"今回は Vue と Nuxt についてです。React や JavaScript を調べているとよく目にするので調べてみました。",[10,14,15],{},"先に感想をいうと、非常に簡単で使いやすかったです。",[10,17,18],{},"パッとフロントを作りたいならとりあえず Nuxt を検討するのはありだと思います。",[10,20,21],{},"Vue と Nuxt は公式ドキュメントが日本語で丁寧に書いてあるので、わからないことは公式で調べられるのがいいです！",[10,23,24],{},"こちらの書籍も参考にさせていただきました。",[26,27,28],"ul",{},[29,30,31],"li",{},[32,33,37],"a",{"href":34,"rel":35},"https:\u002F\u002Famzn.to\u002F36A3qzV",[36],"nofollow","Vue.js & Nuxt.js 超入門",[10,39,40],{},"※ 情報は 2019\u002F1\u002F18 のものです",[42,43,44],"h2",{"id":44},"環境構築",[10,46,47],{},"最低限必要なものは以下です。",[26,49,50],{},[29,51,52,53],{},"Node.js のインストール\n",[26,54,55],{},[29,56,57],{},[32,58,61],{"href":59,"rel":60},"https:\u002F\u002Fnodejs.org\u002Fen\u002F",[36],"Node.js 公式",[10,63,64],{},"Node.js のインストールが済めば npm というパッケージマネージャーが使えます。\nnpm コマンドで Vue CLI と cli-service-global をインストールします。",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-bash shiki shiki-themes github-dark","npm install -g @vue\u002Fcli @vue\u002Fcli-service-global\n","bash","",[73,74,75],"code",{"__ignoreMap":71},[76,77,80,84,88,92,95],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"svObZ","npm",[76,85,87],{"class":86},"sU2Wk"," install",[76,89,91],{"class":90},"sDLfK"," -g",[76,93,94],{"class":86}," @vue\u002Fcli",[76,96,97],{"class":86}," @vue\u002Fcli-service-global\n",[10,99,100],{},"これで Vue を使うための最低限の準備は完了です。",[10,102,103],{},"Vue CLI がインストールされていれば、もうちょっと本格的に Vue を始められるプロジェクト作成のコマンドを使用できます。",[66,105,107],{"className":68,"code":106,"language":70,"meta":71,"style":71},"vue create \u003Cproject-name>\n",[73,108,109],{"__ignoreMap":71},[76,110,111,114,117,121,124,128],{"class":78,"line":79},[76,112,113],{"class":82},"vue",[76,115,116],{"class":86}," create",[76,118,120],{"class":119},"snl16"," \u003C",[76,122,123],{"class":86},"project-nam",[76,125,127],{"class":126},"s95oV","e",[76,129,130],{"class":119},">\n",[10,132,133],{},"こちらを実行するとプロジェクトフォルダが作成され、なかに必要なものがたいがい揃っています。",[10,135,136],{},"Nuxt の場合は以下のコマンドで Nuxt を使うために基本的に必要なものが揃ったプロジェクトを作成できます。",[66,138,140],{"className":68,"code":139,"language":70,"meta":71,"style":71},"npx create-nuxt-app \u003Cproject-name>\n",[73,141,142],{"__ignoreMap":71},[76,143,144,147,150,152,154,156],{"class":78,"line":79},[76,145,146],{"class":82},"npx",[76,148,149],{"class":86}," create-nuxt-app",[76,151,120],{"class":119},[76,153,123],{"class":86},[76,155,127],{"class":126},[76,157,130],{"class":119},[10,159,160],{},"こちらのコマンドでも vue create コマンド同様に必要なものがたいがい揃います",[10,162,163],{},"上記以外で個人的に入れておくとおすすめなのは以下になります。",[26,165,166,181,196,211,226],{},[29,167,168,169],{},"Vue.js devtool\n",[26,170,171,174],{},[29,172,173],{},"vue を chrome ブラウザでデバックするためのもの",[29,175,176],{},[32,177,180],{"href":178,"rel":179},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fvuejs-devtools\u002Fnhdogjmejiglipccpnnnanhbledajbpd?hl=ja",[36],"Vue.js devtool",[29,182,183,184],{},"anyenv\n",[26,185,186,189],{},[29,187,188],{},"pyenv や nodenv などの言語のバージョン管理を行う〇〇 env 系を管理するもの",[29,190,191],{},[32,192,195],{"href":193,"rel":194},"https:\u002F\u002Fgithub.com\u002Fanyenv\u002Fanyenv",[36],"anyenv の GitHub",[29,197,198,199],{},"nodenv\n",[26,200,201,204],{},[29,202,203],{},"Node.js のバージョン管理を行うもの",[29,205,206],{},[32,207,210],{"href":208,"rel":209},"https:\u002F\u002Fgithub.com\u002Fnodenv\u002Fnodenv",[36],"nodenv の GitHub",[29,212,213,214],{},"Visual Studio Code\n",[26,215,216,219],{},[29,217,218],{},"エディタとしておすすめ。便利なプラグインがたくさんある。",[29,220,221],{},[32,222,225],{"href":223,"rel":224},"https:\u002F\u002Fazure.microsoft.com\u002Fja-jp\u002Fproducts\u002Fvisual-studio-code\u002F",[36],"Visual Studio Code 公式",[29,227,228,229],{},"yarn\n",[26,230,231,234],{},[29,232,233],{},"npm と同じパッケージマネージャー。npm より早い",[29,235,236],{},[32,237,240],{"href":238,"rel":239},"https:\u002F\u002Fyarnpkg.com\u002Flang\u002Fja\u002F",[36],"yarn 公式",[10,242,243],{},"これらは Mac であれば homebrew でだいたいそろいます。",[42,245,247],{"id":246},"vue-と-nuxt-の違い","Vue と Nuxt の違い",[10,249,250,251,256],{},"違いについては",[32,252,255],{"href":253,"rel":254},"https:\u002F\u002Fja.nuxtjs.org\u002Fguide\u002F",[36],"Nuxt JS 公式","に書いてあります。",[10,258,259,260,263],{},"Nuxt は Vue に基づいたフレームワークです。",[73,261,262],{},".vue","で記述でき、SSR やルーティングといったよく使う機能があらかじめそろえられています。Vue をより強力にしたものという認識でいいと思います。",[10,265,266,267,272],{},"Nuxt を使った web ページには有名なところだと",[32,268,271],{"href":269,"rel":270},"https:\u002F\u002Fnote.mu\u002F",[36],"note","があります。",[42,274,276],{"id":275},"nuxt-でページ作成","Nuxt でページ作成",[10,278,279],{},"Nuxt で簡単な web ページを作ってみます。",[10,281,282,283,286],{},"まずは、適当なフォルダで",[73,284,285],{},"npx create-nuxt-app \u003Cproject-name>","を実行します。",[10,288,289],{},"コマンドを入力するといろいろ聞かれますがデフォルトのままで進みます。",[10,291,292,293,296,297,299],{},"インストールが終わったら、作ったプロジェクトフォルダに移動して",[73,294,295],{},"yarn dev","を入力（パッケージマネージャーに npm を選択した人は",[73,298,83],{},"コマンドを使う）。",[10,301,302,303,306],{},"ブラウザで",[73,304,305],{},"localhost:3000","にアクセスすると以下のような画面が表示されます。",[308,309],"img",{"alt":113,"img-src":310},"\u002Fimg\u002Fvue\u002Fvue1.png",[10,312,313],{},"これをカスタマイズしていきます。",[10,315,316,317,320],{},"表示されている内容はプロジェクトフォルダ内の pages 配下の",[73,318,319],{},"index.vue","なので、こちらを開いて編集します。\nとりあえずロゴやリンクを消してシンプルなページにしてみます。コードは以下の通りです。",[66,322,326],{"className":323,"code":324,"language":325,"meta":71,"style":71},"language-html shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1 class=\"title\">テストページ\u003C\u002Fh1>\n    \u003Ch2 class=\"subtitle\">Nuxtお試し中\u003C\u002Fh2>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n      'Helvetica Neue', Arial, sans-serif;\n    display: block;\n    font-weight: 300;\n    font-size: 100px;\n    color: #35495e;\n    letter-spacing: 1px;\n  }\n\n  .subtitle {\n    font-weight: 300;\n    font-size: 42px;\n    color: #526488;\n    word-spacing: 5px;\n    padding-bottom: 15px;\n  }\n\u003C\u002Fstyle>\n","html",[73,327,328,339,350,375,396,406,416,423,433,445,454,459,469,478,510,529,542,555,571,584,599,605,610,618,629,643,655,670,685,690],{"__ignoreMap":71},[76,329,330,333,337],{"class":78,"line":79},[76,331,332],{"class":126},"\u003C",[76,334,336],{"class":335},"s4JwU","template",[76,338,130],{"class":126},[76,340,342,345,348],{"class":78,"line":341},2,[76,343,344],{"class":126},"  \u003C",[76,346,347],{"class":335},"div",[76,349,130],{"class":126},[76,351,353,356,359,362,365,368,371,373],{"class":78,"line":352},3,[76,354,355],{"class":126},"    \u003C",[76,357,358],{"class":335},"h1",[76,360,361],{"class":82}," class",[76,363,364],{"class":126},"=",[76,366,367],{"class":86},"\"title\"",[76,369,370],{"class":126},">テストページ\u003C\u002F",[76,372,358],{"class":335},[76,374,130],{"class":126},[76,376,378,380,382,384,386,389,392,394],{"class":78,"line":377},4,[76,379,355],{"class":126},[76,381,42],{"class":335},[76,383,361],{"class":82},[76,385,364],{"class":126},[76,387,388],{"class":86},"\"subtitle\"",[76,390,391],{"class":126},">Nuxtお試し中\u003C\u002F",[76,393,42],{"class":335},[76,395,130],{"class":126},[76,397,399,402,404],{"class":78,"line":398},5,[76,400,401],{"class":126},"  \u003C\u002F",[76,403,347],{"class":335},[76,405,130],{"class":126},[76,407,409,412,414],{"class":78,"line":408},6,[76,410,411],{"class":126},"\u003C\u002F",[76,413,336],{"class":335},[76,415,130],{"class":126},[76,417,419],{"class":78,"line":418},7,[76,420,422],{"emptyLinePlaceholder":421},true,"\n",[76,424,426,428,431],{"class":78,"line":425},8,[76,427,332],{"class":126},[76,429,430],{"class":335},"script",[76,432,130],{"class":126},[76,434,436,439,442],{"class":78,"line":435},9,[76,437,438],{"class":119},"  export",[76,440,441],{"class":119}," default",[76,443,444],{"class":126}," {}\n",[76,446,448,450,452],{"class":78,"line":447},10,[76,449,411],{"class":126},[76,451,430],{"class":335},[76,453,130],{"class":126},[76,455,457],{"class":78,"line":456},11,[76,458,422],{"emptyLinePlaceholder":421},[76,460,462,464,467],{"class":78,"line":461},12,[76,463,332],{"class":126},[76,465,466],{"class":335},"style",[76,468,130],{"class":126},[76,470,472,475],{"class":78,"line":471},13,[76,473,474],{"class":82},"  .title",[76,476,477],{"class":126}," {\n",[76,479,481,484,487,490,493,496,498,501,504,507],{"class":78,"line":480},14,[76,482,483],{"class":90},"    font-family",[76,485,486],{"class":126},": ",[76,488,489],{"class":86},"'Quicksand'",[76,491,492],{"class":126},", ",[76,494,495],{"class":86},"'Source Sans Pro'",[76,497,492],{"class":126},[76,499,500],{"class":90},"-apple-system",[76,502,503],{"class":126},", BlinkMacSystemFont, ",[76,505,506],{"class":86},"'Segoe UI'",[76,508,509],{"class":126},", Roboto,\n",[76,511,513,516,518,521,523,526],{"class":78,"line":512},15,[76,514,515],{"class":86},"      'Helvetica Neue'",[76,517,492],{"class":126},[76,519,520],{"class":90},"Arial",[76,522,492],{"class":126},[76,524,525],{"class":90},"sans-serif",[76,527,528],{"class":126},";\n",[76,530,532,535,537,540],{"class":78,"line":531},16,[76,533,534],{"class":90},"    display",[76,536,486],{"class":126},[76,538,539],{"class":90},"block",[76,541,528],{"class":126},[76,543,545,548,550,553],{"class":78,"line":544},17,[76,546,547],{"class":90},"    font-weight",[76,549,486],{"class":126},[76,551,552],{"class":90},"300",[76,554,528],{"class":126},[76,556,558,561,563,566,569],{"class":78,"line":557},18,[76,559,560],{"class":90},"    font-size",[76,562,486],{"class":126},[76,564,565],{"class":90},"100",[76,567,568],{"class":119},"px",[76,570,528],{"class":126},[76,572,574,577,579,582],{"class":78,"line":573},19,[76,575,576],{"class":90},"    color",[76,578,486],{"class":126},[76,580,581],{"class":90},"#35495e",[76,583,528],{"class":126},[76,585,587,590,592,595,597],{"class":78,"line":586},20,[76,588,589],{"class":90},"    letter-spacing",[76,591,486],{"class":126},[76,593,594],{"class":90},"1",[76,596,568],{"class":119},[76,598,528],{"class":126},[76,600,602],{"class":78,"line":601},21,[76,603,604],{"class":126},"  }\n",[76,606,608],{"class":78,"line":607},22,[76,609,422],{"emptyLinePlaceholder":421},[76,611,613,616],{"class":78,"line":612},23,[76,614,615],{"class":82},"  .subtitle",[76,617,477],{"class":126},[76,619,621,623,625,627],{"class":78,"line":620},24,[76,622,547],{"class":90},[76,624,486],{"class":126},[76,626,552],{"class":90},[76,628,528],{"class":126},[76,630,632,634,636,639,641],{"class":78,"line":631},25,[76,633,560],{"class":90},[76,635,486],{"class":126},[76,637,638],{"class":90},"42",[76,640,568],{"class":119},[76,642,528],{"class":126},[76,644,646,648,650,653],{"class":78,"line":645},26,[76,647,576],{"class":90},[76,649,486],{"class":126},[76,651,652],{"class":90},"#526488",[76,654,528],{"class":126},[76,656,658,661,663,666,668],{"class":78,"line":657},27,[76,659,660],{"class":90},"    word-spacing",[76,662,486],{"class":126},[76,664,665],{"class":90},"5",[76,667,568],{"class":119},[76,669,528],{"class":126},[76,671,673,676,678,681,683],{"class":78,"line":672},28,[76,674,675],{"class":90},"    padding-bottom",[76,677,486],{"class":126},[76,679,680],{"class":90},"15",[76,682,568],{"class":119},[76,684,528],{"class":126},[76,686,688],{"class":78,"line":687},29,[76,689,604],{"class":126},[76,691,693,695,697],{"class":78,"line":692},30,[76,694,411],{"class":126},[76,696,466],{"class":335},[76,698,130],{"class":126},[10,700,701],{},"そうするとブラウザはこんな感じになってると思います。",[308,703],{"alt":113,"img-src":704},"\u002Fimg\u002Fvue\u002Fvue2.png",[10,706,707,708,710],{},"ちなみに",[73,709,295],{},"実行中はホットリロードが行われていて、変更がリアルタイムに反映されます。",[10,712,713],{},"次はページを追加します。",[10,715,716,717,719,720,723],{},"ページを追加するにはプロジェクトフォルダ内の pages 配下に新しく拡張子",[73,718,262],{},"のファイルを追加します。名前はなんでもいいです。今回は",[73,721,722],{},"next.vue","にしました。",[10,725,726,728,729,731],{},[73,727,722],{},"には",[73,730,319],{},"の内容をコピーして title 部分などを書き換えておきます。",[10,733,734,735,737],{},"次は",[73,736,319],{},"にもどって新しいページへのリンクを書きます。",[66,739,741],{"className":323,"code":740,"language":325,"meta":71,"style":71},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1 class=\"title\">テストページ\u003C\u002Fh1>\n    \u003Ch2 class=\"subtitle\">Nuxtお試し中\u003C\u002Fh2>\n    \u003C!-- 次ページへのリンク -->\n    \u003Cnuxt-link to=\"\u002Fnext\">次ページへ\u003C\u002Fnuxt-link>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003C!--以下省略-->\n",[73,742,743,751,759,777,795,801,823,831,839,843],{"__ignoreMap":71},[76,744,745,747,749],{"class":78,"line":79},[76,746,332],{"class":126},[76,748,336],{"class":335},[76,750,130],{"class":126},[76,752,753,755,757],{"class":78,"line":341},[76,754,344],{"class":126},[76,756,347],{"class":335},[76,758,130],{"class":126},[76,760,761,763,765,767,769,771,773,775],{"class":78,"line":352},[76,762,355],{"class":126},[76,764,358],{"class":335},[76,766,361],{"class":82},[76,768,364],{"class":126},[76,770,367],{"class":86},[76,772,370],{"class":126},[76,774,358],{"class":335},[76,776,130],{"class":126},[76,778,779,781,783,785,787,789,791,793],{"class":78,"line":377},[76,780,355],{"class":126},[76,782,42],{"class":335},[76,784,361],{"class":82},[76,786,364],{"class":126},[76,788,388],{"class":86},[76,790,391],{"class":126},[76,792,42],{"class":335},[76,794,130],{"class":126},[76,796,797],{"class":78,"line":398},[76,798,800],{"class":799},"sAwPA","    \u003C!-- 次ページへのリンク -->\n",[76,802,803,805,808,811,813,816,819,821],{"class":78,"line":408},[76,804,355],{"class":126},[76,806,807],{"class":335},"nuxt-link",[76,809,810],{"class":82}," to",[76,812,364],{"class":126},[76,814,815],{"class":86},"\"\u002Fnext\"",[76,817,818],{"class":126},">次ページへ\u003C\u002F",[76,820,807],{"class":335},[76,822,130],{"class":126},[76,824,825,827,829],{"class":78,"line":418},[76,826,401],{"class":126},[76,828,347],{"class":335},[76,830,130],{"class":126},[76,832,833,835,837],{"class":78,"line":425},[76,834,411],{"class":126},[76,836,336],{"class":335},[76,838,130],{"class":126},[76,840,841],{"class":78,"line":435},[76,842,422],{"emptyLinePlaceholder":421},[76,844,845],{"class":78,"line":447},[76,846,847],{"class":799},"\u003C!--以下省略-->\n",[10,849,850,853],{},[73,851,852],{},"\u003Cnuxt-link to=\"\u002Fnext\">次ページへ\u003C\u002Fnuxt-link>","で to=の部分に拡張子なしのファイル名を記述するだけで次ページへのリンクになります。",[10,855,856],{},"次ページへリンクをクリックすると先ほど作成したページが以下のように表示されるはずです。",[308,858],{"alt":113,"img-src":859},"\u002Fimg\u002Fvue\u002Fvue3.png",[42,861,863],{"id":862},"components-の使い方","components の使い方",[10,865,866],{},"次はコンポーネントを使ってみます。",[10,868,869],{},"まず、コンポーネントとはその名通り部品です。いろんなページで共通して使われるものはコンポーネントとして書いておくと何度も同じことを書かずにすむので便利です。",[10,871,872],{},"さっきのページにヘッダーをコンポーネントとして追加します。",[10,874,875,876,879,880,883],{},"プロジェクト内の",[73,877,878],{},"components","フォルダに",[73,881,882],{},"Header.vue","を追加します。",[10,885,886],{},"内容はこんな感じで単純なものにしました。",[66,888,890],{"className":323,"code":889,"language":325,"meta":71,"style":71},"\u003Ctemplate>\n  \u003Cdiv class=\"header\">\n    \u003Ch1>ヘッダー\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n  .header {\n    background-color: antiquewhite;\n  }\n\u003C\u002Fstyle>\n",[73,891,892,900,915,928,936,944,948,956,964,972,976,984,991,1003,1007],{"__ignoreMap":71},[76,893,894,896,898],{"class":78,"line":79},[76,895,332],{"class":126},[76,897,336],{"class":335},[76,899,130],{"class":126},[76,901,902,904,906,908,910,913],{"class":78,"line":341},[76,903,344],{"class":126},[76,905,347],{"class":335},[76,907,361],{"class":82},[76,909,364],{"class":126},[76,911,912],{"class":86},"\"header\"",[76,914,130],{"class":126},[76,916,917,919,921,924,926],{"class":78,"line":352},[76,918,355],{"class":126},[76,920,358],{"class":335},[76,922,923],{"class":126},">ヘッダー\u003C\u002F",[76,925,358],{"class":335},[76,927,130],{"class":126},[76,929,930,932,934],{"class":78,"line":377},[76,931,401],{"class":126},[76,933,347],{"class":335},[76,935,130],{"class":126},[76,937,938,940,942],{"class":78,"line":398},[76,939,411],{"class":126},[76,941,336],{"class":335},[76,943,130],{"class":126},[76,945,946],{"class":78,"line":408},[76,947,422],{"emptyLinePlaceholder":421},[76,949,950,952,954],{"class":78,"line":418},[76,951,332],{"class":126},[76,953,430],{"class":335},[76,955,130],{"class":126},[76,957,958,960,962],{"class":78,"line":425},[76,959,438],{"class":119},[76,961,441],{"class":119},[76,963,444],{"class":126},[76,965,966,968,970],{"class":78,"line":435},[76,967,411],{"class":126},[76,969,430],{"class":335},[76,971,130],{"class":126},[76,973,974],{"class":78,"line":447},[76,975,422],{"emptyLinePlaceholder":421},[76,977,978,980,982],{"class":78,"line":456},[76,979,332],{"class":126},[76,981,466],{"class":335},[76,983,130],{"class":126},[76,985,986,989],{"class":78,"line":461},[76,987,988],{"class":82},"  .header",[76,990,477],{"class":126},[76,992,993,996,998,1001],{"class":78,"line":471},[76,994,995],{"class":90},"    background-color",[76,997,486],{"class":126},[76,999,1000],{"class":90},"antiquewhite",[76,1002,528],{"class":126},[76,1004,1005],{"class":78,"line":480},[76,1006,604],{"class":126},[76,1008,1009,1011,1013],{"class":78,"line":512},[76,1010,411],{"class":126},[76,1012,466],{"class":335},[76,1014,130],{"class":126},[10,1016,1017,1018,1020],{},"次は、",[73,1019,319],{},"に Header コンポーネントを組み込みます。",[66,1022,1024],{"className":323,"code":1023,"language":325,"meta":71,"style":71},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- ヘッダーコンポーネント -->\n    \u003Cheader \u002F>\n    \u003Ch1 class=\"title\">テストページ\u003C\u002Fh1>\n    \u003Ch2 class=\"subtitle\">Nuxtお試し中\u003C\u002Fh2>\n    \u003Cnuxt-link to=\"\u002Fnext\">次ページへ\u003C\u002Fnuxt-link>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  import Header from '..\u002Fcomponents\u002FHeader'\n\n  export default {\n    components: {\n      Header,\n    },\n  }\n\u003C\u002Fscript>\n",[73,1025,1026,1034,1042,1047,1060,1078,1096,1114,1122,1130,1134,1142,1156,1160,1168,1173,1178,1183,1187],{"__ignoreMap":71},[76,1027,1028,1030,1032],{"class":78,"line":79},[76,1029,332],{"class":126},[76,1031,336],{"class":335},[76,1033,130],{"class":126},[76,1035,1036,1038,1040],{"class":78,"line":341},[76,1037,344],{"class":126},[76,1039,347],{"class":335},[76,1041,130],{"class":126},[76,1043,1044],{"class":78,"line":352},[76,1045,1046],{"class":799},"    \u003C!-- ヘッダーコンポーネント -->\n",[76,1048,1049,1051,1054,1058],{"class":78,"line":377},[76,1050,355],{"class":126},[76,1052,1053],{"class":335},"header",[76,1055,1057],{"class":1056},"s6RL2"," \u002F",[76,1059,130],{"class":126},[76,1061,1062,1064,1066,1068,1070,1072,1074,1076],{"class":78,"line":398},[76,1063,355],{"class":126},[76,1065,358],{"class":335},[76,1067,361],{"class":82},[76,1069,364],{"class":126},[76,1071,367],{"class":86},[76,1073,370],{"class":126},[76,1075,358],{"class":335},[76,1077,130],{"class":126},[76,1079,1080,1082,1084,1086,1088,1090,1092,1094],{"class":78,"line":408},[76,1081,355],{"class":126},[76,1083,42],{"class":335},[76,1085,361],{"class":82},[76,1087,364],{"class":126},[76,1089,388],{"class":86},[76,1091,391],{"class":126},[76,1093,42],{"class":335},[76,1095,130],{"class":126},[76,1097,1098,1100,1102,1104,1106,1108,1110,1112],{"class":78,"line":418},[76,1099,355],{"class":126},[76,1101,807],{"class":335},[76,1103,810],{"class":82},[76,1105,364],{"class":126},[76,1107,815],{"class":86},[76,1109,818],{"class":126},[76,1111,807],{"class":335},[76,1113,130],{"class":126},[76,1115,1116,1118,1120],{"class":78,"line":425},[76,1117,401],{"class":126},[76,1119,347],{"class":335},[76,1121,130],{"class":126},[76,1123,1124,1126,1128],{"class":78,"line":435},[76,1125,411],{"class":126},[76,1127,336],{"class":335},[76,1129,130],{"class":126},[76,1131,1132],{"class":78,"line":447},[76,1133,422],{"emptyLinePlaceholder":421},[76,1135,1136,1138,1140],{"class":78,"line":456},[76,1137,332],{"class":126},[76,1139,430],{"class":335},[76,1141,130],{"class":126},[76,1143,1144,1147,1150,1153],{"class":78,"line":461},[76,1145,1146],{"class":119},"  import",[76,1148,1149],{"class":126}," Header ",[76,1151,1152],{"class":119},"from",[76,1154,1155],{"class":86}," '..\u002Fcomponents\u002FHeader'\n",[76,1157,1158],{"class":78,"line":471},[76,1159,422],{"emptyLinePlaceholder":421},[76,1161,1162,1164,1166],{"class":78,"line":480},[76,1163,438],{"class":119},[76,1165,441],{"class":119},[76,1167,477],{"class":126},[76,1169,1170],{"class":78,"line":512},[76,1171,1172],{"class":126},"    components: {\n",[76,1174,1175],{"class":78,"line":531},[76,1176,1177],{"class":126},"      Header,\n",[76,1179,1180],{"class":78,"line":544},[76,1181,1182],{"class":126},"    },\n",[76,1184,1185],{"class":78,"line":557},[76,1186,604],{"class":126},[76,1188,1189,1191,1193],{"class":78,"line":573},[76,1190,411],{"class":126},[76,1192,430],{"class":335},[76,1194,130],{"class":126},[10,1196,1197,1198,1201,1202,1205,1206,1209],{},"ポイントは",[73,1199,1200],{},"\u003Cscript>","タグ内に",[73,1203,1204],{},"components\u002FHeader","のインポートするのと、",[73,1207,1208],{},"export default"," 内にあるように使用するコンポーネントを書くことです。",[10,1211,1212],{},"こうすると以下のようにヘッダーが追加されます。",[308,1214],{"alt":113,"img-src":1215},"\u002Fimg\u002Fvue\u002Fvue4.png",[42,1217,1219],{"id":1218},"layouts-の使い方","layouts の使い方",[10,1221,1222,1223,1226],{},"ヘッダーのようにどのページでも共通するものは、",[73,1224,1225],{},"layouts\u002Fdefault.vue","に記述することで全ページに適用されます。",[10,1228,1229,1230,1232,1233,1235],{},"今の状態だと",[73,1231,722],{},"のページにはヘッダーは反映されていないと思うので、",[73,1234,1225],{},"を使うことで全ページに適用されるか確かめていきます。",[10,1237,1238,1239,1241],{},"まずは前項で",[73,1240,319],{},"に追加した Header コンポーネントを削除して、追加前の状態にします。",[10,1243,734,1244,1246],{},[73,1245,1225],{},"に Header コンポーネントを追加します。コンポーネントの追加は上に記載したのと同じ方法です。",[66,1248,1250],{"className":323,"code":1249,"language":325,"meta":71,"style":71},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CHeader \u002F>\n    \u003Cnuxt \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport Header from \"..\u002Fcomponents\u002FHeader\";\n\nexport default {\n  components: {\n    Header\n  }\n};\n\u003C\u002Fscript>\n\u003C!--以下のstyleは省略>\n",[73,1251,1252,1260,1268,1279,1289,1297,1305,1309,1317,1331,1335,1344,1349,1354,1358,1363,1371],{"__ignoreMap":71},[76,1253,1254,1256,1258],{"class":78,"line":79},[76,1255,332],{"class":126},[76,1257,336],{"class":335},[76,1259,130],{"class":126},[76,1261,1262,1264,1266],{"class":78,"line":341},[76,1263,344],{"class":126},[76,1265,347],{"class":335},[76,1267,130],{"class":126},[76,1269,1270,1272,1275,1277],{"class":78,"line":352},[76,1271,355],{"class":126},[76,1273,1274],{"class":335},"Header",[76,1276,1057],{"class":1056},[76,1278,130],{"class":126},[76,1280,1281,1283,1286],{"class":78,"line":377},[76,1282,355],{"class":126},[76,1284,1285],{"class":1056},"nuxt",[76,1287,1288],{"class":126}," \u002F>\n",[76,1290,1291,1293,1295],{"class":78,"line":398},[76,1292,401],{"class":126},[76,1294,347],{"class":335},[76,1296,130],{"class":126},[76,1298,1299,1301,1303],{"class":78,"line":408},[76,1300,411],{"class":126},[76,1302,336],{"class":335},[76,1304,130],{"class":126},[76,1306,1307],{"class":78,"line":418},[76,1308,422],{"emptyLinePlaceholder":421},[76,1310,1311,1313,1315],{"class":78,"line":425},[76,1312,332],{"class":126},[76,1314,430],{"class":335},[76,1316,130],{"class":126},[76,1318,1319,1322,1324,1326,1329],{"class":78,"line":435},[76,1320,1321],{"class":119},"import",[76,1323,1149],{"class":126},[76,1325,1152],{"class":119},[76,1327,1328],{"class":86}," \"..\u002Fcomponents\u002FHeader\"",[76,1330,528],{"class":126},[76,1332,1333],{"class":78,"line":447},[76,1334,422],{"emptyLinePlaceholder":421},[76,1336,1337,1340,1342],{"class":78,"line":456},[76,1338,1339],{"class":119},"export",[76,1341,441],{"class":119},[76,1343,477],{"class":126},[76,1345,1346],{"class":78,"line":461},[76,1347,1348],{"class":126},"  components: {\n",[76,1350,1351],{"class":78,"line":471},[76,1352,1353],{"class":126},"    Header\n",[76,1355,1356],{"class":78,"line":480},[76,1357,604],{"class":126},[76,1359,1360],{"class":78,"line":512},[76,1361,1362],{"class":126},"};\n",[76,1364,1365,1367,1369],{"class":78,"line":531},[76,1366,411],{"class":126},[76,1368,430],{"class":335},[76,1370,130],{"class":126},[76,1372,1373],{"class":78,"line":544},[76,1374,1375],{"class":799},"\u003C!--以下のstyleは省略>\n",[10,1377,1378],{},"これで両方のページにヘッダーが追加されているはずです。",[308,1380],{"alt":113,"img-src":1381},"\u002Fimg\u002Fvue\u002Fvue5.png",[10,1383,1384],{},"ちゃんと反映されてますね！",[42,1386,1387],{"id":1387},"まとめ",[10,1389,1390],{},"本記事では、Vue と Nuxt の始め方や components、layouts について紹介しました。",[10,1392,1393],{},"Vue と Nuxt はわかりやすくて楽しいです！",[10,1395,1396],{},"本当は v-on やら v-model についても書いていたのですが、記事が長くなりすぎたのでわけました笑",[10,1398,1399],{},"今回はページ遷移くらいしかやってないので、面白いのは次の記事です！",[466,1401,1402],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}",{"title":71,"searchDepth":341,"depth":341,"links":1404},[1405,1406,1407,1408,1409,1410],{"id":44,"depth":341,"text":44},{"id":246,"depth":341,"text":247},{"id":275,"depth":341,"text":276},{"id":862,"depth":341,"text":863},{"id":1218,"depth":341,"text":1219},{"id":1387,"depth":341,"text":1387},"2020-01-15",false,"md",{},"\u002Fcontents\u002Fvue_begin",{"title":5,"description":71},"contents\u002Fvue_begin",[1419,1420,1421],"Vue","JavaScript","Nuxt","\u002Fimg\u002Ftwitter-card.png","tV0A5DdPAi8gKT2V9XI5CXmpiuzD81_MAeDZt0fLlBw",[1425,1429],{"title":1426,"path":1427,"stem":1428,"children":-1},"vue3とnuxt3をvue2初心者が触ってみた","\u002Fcontents\u002Fvue3nuxt3","contents\u002Fvue3nuxt3",{"title":1430,"path":1431,"stem":1432,"children":-1},"【VueとNuxt】v-on, v-if, v-bind, v-modelの使い方紹介","\u002Fcontents\u002Fvue_begin2","contents\u002Fvue_begin2",1784936719129]