1. Glossary of terms - feathers-nuxt/template-app GitHub Wiki
This page is for disambiguation of common terms used by nuxt
and feathers
Markup
HTML or Vue code for rendering user interface. What is generally called component
in front-end frameworks
circles. The term component
in this wiki
has a more specialized definition. (See below)
Static Assets
Static files such - as images and videos - for the front-end may be placed in either assets
or static
. To inline the assets in the bundled script, put them in assets directory, otherwise put them in the static
directory to serve them separately using feathers
. The downside to inline assets is that the bundle file may grow too large and the assets can not be cache
d for offline use.
Global styles
should be in the assets
directory so that they be inlined in the bundle.
SFC
)
Single File Component (A file with .vue
extension containing mark up structured in 3 section: template
, script
and/or style
. Templates can be written in HTML
or any language that compiles to HTML
. feathers-nuxt
prefers pug
to ensure you write less code. script
can be written in javascript
or any language that compiles to javascript
. feathers-nuxt
prefers livescript
so you may type less braces and semicolons. Similarly, style
can be written in CSS
or any language that compiles to CSS
. feathers-nuxt
prefers stylus so you write less braces.
Page
A page is, simply, a SFC
under client/pages
directory. nuxt
ensures that the page can be accessed using a relative url
matching the file's name. E.g about.vue
is made accessible using /about
at the URL bar. A sub-directory inside client/pages
will result to nested routes. If the name of the .vue
file or sub-directory starts with an underscore, the routing path will be dynamic. See nuxt routing guide for more information.
Layout
A layout is, simply, a SFC
under client/layouts
directory. nuxt
inserts each page into a Layout SFC
during rendering by passing the relevant Page SFC
as a child component to the Layout SFC
. If a Page SFC
does not declare a layout
, the default layout is used.
Component
A component is, simply, a SFC
under client/components
directory containing a custom HTML element to be used within Page SFC
s and Layout SFC
s. Unlike a Layout SFC
s which are parents for Page SFC
s, a Component
is a child to either Page SFC
s and Layout SFC
s.
Front-end Logic
feathers-nuxt
distinguishes logic for the front-end into several concepts: middleware, plugins and modules. Logic for accessing server from the frontend is in the api
directory containing a single file feathers.js
to be used by the default vuex
store module. See bellow
Vue Plugins
The plugins
directory contains Logic for extending vue
with vue-*
plugins such as vue-scrollto
or vuex-router-sync
. To include a plugin
in the build ensure you add it to plugins
declaration on nuxt
section of f3.config.js
.
By default, plugins are available on both the server and client instance of vue
unless you include ssr: false
in the plugin declaration object to ensure that a plugin is available on the client only. Front-end only plugins are often wrapped in a window.onNuxtReady
event listener to ensure Vue is ready before plugin initialization.
Page Middleware
A middleware is, simply, a function that runs before rendering a page on either server or client depending on where rendering happens. A Page SFC
may declare middleware
functions for that specific page. Alternatively, to run a set of middleware
for each and every Page SFC
, put the declaration in nuxt
section of f3.config.js
.
Nuxt Module
A module contains logic for configuring or extending nuxt
server side renderer such as setting up custom webpack
loaders, SSR hooks, or Vue Plugins among others
Global State Management
Although setting up vuex
is optional in standard nuxt
application, it is setup by default in feathers-nuxt
to abstract server side data in the client.
Vuex Store
feathers-nuxt
sets up vuex store in modules mode such that every file inside store
directory is a vuex
store module.
Vuex Plugins
To include a vuex
plugin, add the declaration in plugins
export of store/index.js
. See vuex guide for more information.