Nuxt.js｜基本

  • 投稿日
  • 著者 kngsmym
  • カテゴリー Nuxt.js

設定ファイル

nuxt.config.js

htmlのheadの内容、グローバルなCSSや、読み込むコンポーネント、モジュールなどを定義する。

ページの作成

基本以下の２つのフォルダのファイルをいじるとページが作成できる。

  • pages
  • components

pages

ページ作成用のフォルダ。

ルーティング設定も兼ねる。

Nuxt.jsではvue-routerでルーティングされるが、pagesフォルダ配下に作成されたフォルダ名を元にルーティング設定が自動で行われるので、ルーティング設定の記述が不要。

使用するURLの名称でpages配下にフォルダを作成し、その作成したフォルダ下にindex.vueを置いてページの内容を構築する。

例えば以下のようなフォルダ構成でファイルを作成した場合

[pages]
- [test]
 - index.vue

以下のURLで参照できる

http://localhost:3000/test

components

部品を登録するためのフォルダ。

普通にVueのコンポーネントとして作成する感じ。

例えば以下のように配置すると

[components]
- Logo.vue

ページで以下のように使用できる

<div>
 <Logo />
</div>

ルーティングやコンポーネントに登録するための記述とかがいらないのが楽なんですかね。

ファイル置き場

以下のフォルダにファイルを配置する。

assetsは書き出す際に設定しだいで色々変わるはずのものを動的に扱うために配置し、staticはサーバールートなどで必ず静的に参照するはずのものを置く。

  • assets
  • static

assets

スタイルや画像、フォントなどコンパイルされていないものを格納する。

ここに入れて、以下の書式で呼び出せばフォルダを参照できる。

コンポーネント

~/assetsのように、スラッシュ付きで参照

<template>
  <img src="~/assets/your_image.png" />
</template>

CSS

~assetsのように、スラッシュなしで参照

background: url('~assets/banner.svg');

static

サーバールートに配置して、変更されないものを格納する。favicon.icoやrobots.txtなど

Nuxt Vue