14Four Wiki

# Nuxt Project Structure & Usage

# Introduction

# A brief introduction to Nuxt

For a number of our projects we use a Javascript framework called Nuxt (opens new window). Nuxt is built upon Vue (opens new window) and offers some great development features such as server side rendering (SSR), automatic route generation, improved meta tag managing, and SEO improvement. (For more information about SSR v. SPA; you can read a brief overview here (opens new window)).

TIP

It is highly encouraged for you to familiarize yourself with the documentation for Vue, Vuex, and Nuxt routing. Doing so will make your life much easier.

# Project structure

Our project structure is based off of the structure defined by Nuxt with a few notable differences. Mainly, our project structure supports multiple entry points. Entry points utilize different builds to limit what routes/pages can appear based on timing or other needs. For example, a promotional site may require a 'Coming Soon' version, a 'Main' version while the promotion is running, and a 'Promo Over' version when it is finished. Sometimes, a 'Maintenance' build is used during downtimes. Each one of these versions is an entry point.

# Package.json

The package.json file is where our npm scripts and dependecies are defined.

There needs to be one one dev script, one start script, one build script, one generate script, and one serve script per entry point. The path to the entry point is defined in two arguments for each script - --entry-name followed by the name of the entrypoint (ie. main). There is also a build-all and generate-all script that you can run to build/generate all the entry points synchronously rather than having to do one after another. (Note: all the build scripts follow the convention of build:entry-name).

# Entry Points

As its name describes, an entry point is essentially the point of entry into your application. This is where you'll define the layouts/pages you want to show up within your different entry points.

TIP

If you are sharing multiple pages between entry points, you can create the page as a component. Then simply reference that component within each entry point page. For example:

<template>
  <RulesTemplate />
</template>

<script>
import RulesTemplate from '@/components/templates/RulesTemplate'

export default {
  name: 'Rules',
  components: { RulesTemplate },
}
</script>

Another solution would be to extend the routes within the nuxt.config.js file. In the following code, the /rules route is pushed to the non-main entry points.

  ...
  router: {
    extendRoutes(routes, resolve) {
      // NON-MAIN ROUTES
      if (name !== 'main') {
        routes.push({
          name: 'rules',
          path: '/rules',
          component: resolve(__dirname, 'entries/main/pages/rules.vue'),
        })
      }
    },
  },
  ...

# Stores

A store is what use to manage the application's state. Storing information in the state allows us to persist information the whole time a user is using the application (unless they leave the site). It also allows us to use the store as a 'source of truth'; essentially, all of our components can pull information from the store, as well as write/update information to the store. This is useful for when you have two unrelated components that need to use the same information; for example, when a user logs in using a 'Login' component, the 'Nav' component could use the user's information from the store to display a link to the user's profile rather than a login link.

Modules are useful because they allow us to break up our store into smaller groups of similar functions/state. For example, any properties related to the 'User' state could go in store/user.js, as well as the functions that are used to manage users. This module can then be imported by the stores that need access to it.

← DFW Project →