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 cached for offline use. Global styles should be in the assets directory so that they be inlined in the bundle.

Single File Component (SFC)

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 SFCs and Layout SFCs. Unlike a Layout SFCs which are parents for Page SFCs, a Component is a child to either Page SFCs and Layout SFCs.

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.