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
- カスタム設定を記述する
- 詳細は→https://ja.nuxtjs.org/guide/configuration
混乱した部分
componentsとpagesどう使い分ける？
- pages内のファイルがlayoutから呼び出す
<nuxt />コンポーネントになる感じ？ - componentはpageから呼び出すUI部品