What is the best way to store constants in Nuxt?

You can create a constants.js file:

// constants.js
export const CONSTANT_1 = 'CONSTANT_1';
export const CONSTANT_2 = 'CONSTANT_2';
export const CONSTANT_3 = 'CONSTANT_3';
     
// And call it like this
import { CONSTANT_1 } from 'constants';

I think @Birante is just about right. Just because certain folders don't ship with the boilerplate doesn't mean you can't add them. However, I'd propose a structure like such,

|-- assets
|
|-- components
|   |-- Logo.vue
|   `-- index.js
|
|-- constants
|   |-- constants_002.js
|   |-- constants_001.js
|   `-- index.js
|
|-- layouts
|   |-- default.vue
|   `-- index.js
|
|-- middleware
|   `-- index.js
|
|-- pages
|   `-- index.vue
|
|-- plugins
|
|-- static
|
|-- store
|   `-- index.js
|
|-- test
|   `-- Logo.spec
|
`-- package.json

And then set up your constants in a modular fashion like you would any other part of your app.

constants/constants_001.js

export const MY_FIRST_CONSTANT = 'is awesome'

constants/constants_002.js

export const MY_SECOND_CONSTANT = 'is also awesome'

constants/index.js

export * from './constants_001';
export * from './constants_002';

Then you can import your constants as per the convention used throughout your app.

import { MY_FIRST_CONSTANT, MY_SECOND_CONSTANT } from '@/constants/'

This is also a great convention for utils as well that you need to share across the application :)


For me it depends on the context. Most of the times, I find constants useful in the context of Vuex store for the mutations.

You can define the list of constants as follows:

// store/mutation-types.js
export const TOGGLE_MENU_STATE = 'TOGGLE_MENU_STATE';

And then use them in mutations files

import {
  TOGGLE_MENU_STATE,
} from '../store/mutation-types';

const mutations = {
  [TOGGLE_MENU_STATE](state) {
    state.isOpen = !state.isOpen;
  },
};

export default mutations;

Anyway, Nuxt is very deliberate about the folder structure and you can extend it further. For a non-store purposes, all things considered, I'd probably just create a constants folder and fill it with what you need.

// constants/app-constants.js -- example
export const HYDRATING_SUCCESS = 'HYDRATING_SUCCESS';
export const HYDRATING_FAILED = 'HYDRATING_FAILED';
export const LOADING = 'LOADING';
export const LOADED = 'LOADED';
export const SET_ERROR_STATE = 'SET_ERROR_STATE';
export const CLEAR_ERROR_STATE = 'CLEAR_ERROR_STATE';
...

And always import just the ones you need. The benefit also is that you can split the constants into several files by theme if you'd like.


there is not best way it depends on the project and developer style and needs of project.

in some of my project I'm create the local folder and store some data like breadcrumb and i18n on it.

after that create file constants.js in local folder and just insert constant on it. like below

const X="X";
const Y="Y";

export {
  X,
  Y
}

after that for simply use and didn't need to import them in every file I need them create plugin for that like below

import * as Constants from '@/locale/constants';

export default ({ app }, inject) => {
    inject('constants', Constants)
}

after that I can use them in every file needed like below

this.$constants.X