Nuxt.js: nuxt.config variable in layouts

[wormen]

// default.vue
<script>
    // like here receive a variable from the config?
    export default {}
</script>

_{This question is available on Nuxt.js community (#c271)}

[stursby]

@wormen You can just import nuxt.config.js and read from that object. Example:

nuxt.config.js

module.exports = {
  head: {
    title: 'My Website'
  }
}

layouts/default.vue

<template>
  <div>
    <h1>{{ heading }}</h1>
    <nuxt/>
  </div>
</template>

<script>
import config from '../nuxt.config'

export default {
  data() {
    return {
      heading: config.head.title
    }
  }
}
</script>

[wormen]

@stursby it is a bad decision, if the configuration has to be connected on each page, it is better to have a configuration in the global scope

[stursby]

@wormen I think it depends on what you're trying to access. If it's something simple like title, description, etc then I would load it like I mentioned above. But, if you're trying to access a global state in multiple pages/components, I would recommend using Vuex.

[wormen]

@stursby This option is also not suitable for this task, because I use multiple templates at the same time

• I think that the system configuration must be done in one place rather than in multiple locations

[stursby]

@wormen Well then I guess I'm just not quite sure I understand what you're trying to accomplish. That being said, you can access the Vuex store globally in multiple templates at the same time.

See a quick DEMO and SOURCE.

In the demo, 'My App Name' is pulled from the store (store/index.js) which looks like this:

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    name: 'My App Name'
  }
})

export default store

And then you can access that value anywhere in your app using:

{{ this.$store.state.name }}

[wormen]

@stursby if this task will use vuex, it turns out that I have a config app will be split into several parts, and it should be in one place

[wormen]

@stursby in my case, the only place for the storage of config it nuxt.config.js
but connect it to each template page, it is not normal

[awronski]

If you want to have a configuration in a global scope you can check my example.

[wormen]

@awronski Yes, this option is right for me
thanks

[Art-Mas]

@awronski works only on page components in asyncData method. Thats not a global

[arkceajin]

import config from '~/nuxt.config' this shall be better.

[Hxmic]

Vuex, How to auto get variable in 'text.vue'. The varibale is 'navigator.userAgent'.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.