Nuxt-global-base-components NPM

nuxt-global-base-components

Register all BaseComponents globally in the components directory.

Features

In the Vue official style guide, there's a section about Base component names, where base component should have names all begin with a specific prefix, such as Base, App, V, and mentioned a way for webpack users to register all these components globally.

Also, in @chrisvfritz's awesome talk 7 Secret Patterns Vue Consultants Don’t Want You to Know, he explained this technique in detail, too!

So, this module does just that with nuxt!

Installation

Add nuxt-global-base-components dependency using yarn or npm to your project

npm install --save nuxt-global-base-components
# or
yarn add nuxt-global-base-components

Add nuxt-global-base-components to modules section of nuxt.config.js

// nuxt.config.js
module.exports = {
  modules: [
    // Simple usage
    'nuxt-global-base-components',

    // With options (see options below)
    ['nuxt-global-base-components', { recursive: true }],

    // see more useage examples below in the ## Usage Examples section
 ]
}

Usage Examples

With default inline options

// nuxt.config.js
module.exports = {
  modules: [
    // some other modules...
    ['nuxt-global-base-components', {
      componentsPath: '~/components',
      recursive: false,
      regex: /^(\.\/.*)*Base[A-Z].+\.(vue|jsx?)$/
    }]
  ]
}

With top level options which searches subdirectories recursively

// nuxt.config.js
module.exports = {
  modules: [
    // some other modules...
    'nuxt-global-base-components'
  ],
  globalBaseComponents: {
    recursive: true
  }
}

With top level options to only includes `.vue` files and `App` prefix

Only include .vue extensions, so AppButton.js or AppButton.jsx won't be included.

// nuxt.config.js
module.exports = {
  modules: [
    // some other modules...
    'nuxt-global-base-components'
  ],
  globalBaseComponents: {
    regex: /^(\.\/.*)*App[A-Z].+\.vue/
  }
}

Options

Currently, there are three options (and there default values):

const defaultOptions = {
  recursive: false,
  regex: /^(\.\/.*)*Base[A-Z].+\.(vue|jsx?)$/,
  componentsPath: '~/components'
}

And these options are passed to wepack's require.context. For the default example:

const requireComponent = require.context(
  '~/components', // directory to search
  false, // whether subdirectories should be searched too
  /^(\.\/.*)*Base[A-Z].+\.(vue|jsx?)$/ // regular expression to match files against
)

`recursive`

type: Boolean default: false

Indicates whether subdirectories should be searched recursively.

For example, if recursive: false, ~/components/BaseButton.vue will be included, but ~/components/nested/BaseButton.vue won't; and if recursive: true, all ~/components/BaseButton.vue, ~/components/nested/BaseButton.vue, ~/components/deeply/nested/BaseButton.vue, etc. will be included.

Turn this to true if you have BaseComponents in nested directories.

`regex`

type: Regex default: /^(\.\/.*)*Base[A-Z].+\.(vue|jsx?)$/

A regular expression to match files against.

The default regex /^(\.\/.*)*Base[A-Z].+\.(vue|jsx?)$/ matches all files starting with Base (followed by a capital letter, because PascalCase), and ends with .vue, .js or .jsx extension.

Let's explain a little about this regex: 1. Fisrt, ^ means starts with; * means zero or more; . means anything. So the beginning part ^(\.\/.*)* means start with zero or more of the group (./ plus anything), and \.\/ is just ./ with escape. We do this because file names get from webpack looks something like ./BaseButton.vue, ./nested/BaseButton.vue, so we need take the ./ part into account. 2. Base[A-Z].+ is the literal Base, followed by a Capital Letter [A-Z], and then followed by one or more (* means one or more) anything (. means anything). 3. \.(vue|jsx?)$, \. is the escape of ., and | means or in the group, so either .vue or .js or .jsx (where ? means zero or one time), and $ means ends with.

If you have a different prefix for global components, for example App, you can use /^(\.\/.*)*App[A-Z].+\.(vue|jsx?)$/.

Here are some examples:

/^(\.\/.*)*Base[A-Z].+\.vue$/: Matches all .vue files with Base prefix.
/^(\.\/.*)*App[A-Z].+\.(vue|js)$/: Matches .vue or .js files with App prefix.
/^(\.\/.*)*V[A-Z].+\.(vue|jsx?)$/: Matches .vue, .js or .jsx files with V prefix.
/^(\.\/.*)*Base[A-Z]/: Matches any file extension with Base prefix.

`componentsPath`

type: String default: '~/components'

A directory for webpack to search. The default is '~/components', which is probably the case for nuxt projects. Change it if you put your BaseComponents somewhere else.