asset

README.md
# ASSETS

This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.

More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/assets#webpacked

**This directory is not required, you can delete it if you don't want to use it.**

  • assetはLESS, SASS, Javascriptのようなコンパイルされていないアセットを入れるディレクトリ
  • 詳細は→https://ja.nuxtjs.org/guide/assets
  • webpackで取り扱うものを入れる。webpackで扱わないものはstaticに入れる
  • 必須でない

たとえばこんな感じ。

pages/index.vue
<template>
  <img src="~assets/image.png">
</template>

これが、こんな感じにコンパイルされます。

createElement('img', { attrs: { src: require('~assets/image.png') }})

components

README.md
# COMPONENTS

The components directory contains your Vue.js Components.
Nuxt.js doesn't supercharge these components.

**This directory is not required, you can delete it if you don't want to use it.**
  • Vue.jsのコンポーネントを入れるディレクトリ
  • Nuxt.jsはこれらのコンポーネントを溢れさすことはない(superchargeって何?)
  • 必須でない

layout

README.md
# LAYOUTS

This directory contains your Application Layouts.

More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/views#layouts

**This directory is not required, you can delete it if you don't want to use it.**
  • アプリケーションのレイアウトを入れるディレクトリ
  • 詳細は→https://nuxtjs.org/guide/views#layout
  • メインレイアウトやカスタムレイアウトをこのフォルダに入れることでスタイルを拡張することができる
  • メインのレイアウトはdefault.vueファイルを追加することで拡張可能
  • ページコンポーネントを表示するために、レイアウトを作る時に<nuxt />コンポーネントを追加する
  • 必須でない
  • pageコンポーネント内でlayoutプロパティを指定することで、カスタムレイアウトにアクセスすることができる。デフォルトレイアウトと同様に、<nuxt />コンポーネントを追加する必要がある
layouts/blog.vue
<template>
  <div>
    <div>My blog navigation bar here</div>
    <nuxt/>
  </div>
</template>
pages/posts.vue
<script>
export default {
  layout: 'blog'
}
</script>

middleware

README.md
# MIDDLEWARE

This directory contains your Application Middleware.
The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).

More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/routing#middleware

**This directory is not required, you can delete it if you don't want to use it.**
  • アプリケーションのミドルウェアを入れるディレクトリ
  • ミドルウェアはページやレイアウトのグループをレンダリングする前にカスタム関数を実行することを可能にする

pages

README.md
# PAGES

This directory contains your Application Views and Routes.
The framework reads all the .vue files inside this directory and creates the router of your application.

More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/routing

  • アプリケーションのビュー及びルーティングファイルを入れる
  • Nuxt.jsフレームワークはこのディレクトリ内の全ての.vueファイルを読み込み、アプリケーションのルータを作成する
  • 詳細は→https://ja.nuxtjs.org/guide/views
  • asyncData, fetch, head, layout, transition, scrollToTop, validate, middlewareという属性がある

https://ja.nuxtjs.org/guide/installation
Nuxt.js は pages ディレクトリ内のファイルの更新を監視します。そのため、新しいページを追加したときにアプリケーションを再起動する必要はありません。
開発時は、pagesディレクトリ内のホットリロード

plugins

README.md
# PLUGINS

This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.

More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/plugins

**This directory is not required, you can delete it if you don't want to use it.**
  • ルートのVue.jsアプリケーションをインスタンス化する前に実行したいJavascriptプラグインを入れる
  • 詳細は→https://ja.nuxtjs.org/guide/plugins

static

README.md
# STATIC

This directory contains your static files.
Each file inside this directory is mapped to /.

Example: /static/robots.txt is mapped as /robots.txt.

More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/assets#static

**This directory is not required, you can delete it if you don't want to use it.**

  • 静的ファイルを入れる
  • staticディレクトリの配下はルートディレクトリを指すURL/にマッピングされる
<!-- static ディレクトリの(Webpack で扱わない)静的な画像 -->
<img src="/my-image.png"/>

<!-- assets ディレクトリの Webpack で扱われた画像 -->
<img src="~/assets/my-image-2.png"/>

store

README.md
# STORE

This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework.
Creating a index.js file in this directory activate the option in the framework automatically.

More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/vuex-store

**This directory is not required, you can delete it if you don't want to use it.**
  • vuexのストアを入れる
  • このディレクトリ内にindex.jsを追加するとNuxt.jsフレームワーク内でVuexストアのオプションが自動的に有効に鳴る

nuxt.config.js

混乱した部分

componentsとpagesどう使い分ける?

  • pages内のファイルがlayoutから呼び出す<nuxt />コンポーネントになる感じ?
  • componentはpageから呼び出すUI部品
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.