Valid format of /vue.config.js in vue/cli

Question

I neeed some config file in @vue/cli 4.0.5 app and I created manually /vue.config.js with lines :

export const settingsTestriorityLabels = [
  { key: 0, label: 'No00000' },
  { key: 1, label: 'Lowwwwwww' }
]

But trying to use it in my component I got error :

Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTestriorityLabels' is defined but never used (no-unused-vars) at src/views/Tasks/TasksSelection.vue:66:8:
  64 | <script>
  65 | import appMixin from '@/appMixin'
> 66 | import settingsTestriorityLabels from './../../../vue.config.js'
     |        ^
  67 | // vue.config.js
  68 | export default {

but in my component settingsTestriorityLabels declared and used, like :

<template>
  <div class="hello">

    <h1>{{ msg }}</h1>
    TasksSelection.vue +++++++
      settingsTestriorityLabels::{{ settingsTestriorityLabels }}

</template>

<script>
import appMixin from '@/appMixin'
import settingsTestriorityLabels from './../../../vue.config.js'
export default {

Is this configuration invalid ?

MODIFIED # 2 : after break I remade my component and run

npm run serve
again but got error in my config file :
s$ npm run serve

> [email protected] serve /mnt/_work_sdb8/wwwroot/lar/VApps/ctasks
> vue-cli-service serve

 ERROR  Error loading vue.config.js:
 ERROR  SyntaxError: Unexpected token export
/mnt/_work_sdb8/wwwroot/lar/VApps/ctasks/vue.config.js:1
export const settingsTestriorityLabels = [
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:723:23)

I removed export key having in vue.config.js:

const settingsTestriorityLabels = [
  { key: 0, label: 'No00000' },
  { key: 1, label: 'Lowwwwwww' }
]

Is it valid format of vue.config.js?

Anyway I got the same error :

./src/views/Tasks/TasksSelection.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTestriorityLabels' is defined but never used (no-unused-vars) at src/views/Tasks/TasksSelection.vue:66:10:
  64 | <script>
  65 | import appMixin from '@/appMixin'
> 66 | import { settingsTestriorityLabels } from './../../../vue.config.js'
     |          ^
  67 | // vue.config.js
  68 | export default {

My component content :

<template>
  <div class="hello">

    <h1>{{ msg }}</h1>
      settingsTestriorityLabels::{{ settingsTestriorityLabels }}
        ...
</template>

<script>
import appMixin from '@/appMixin'
import { settingsTestriorityLabels } from './../../../vue.config.js'
export default {

  data: function () {
    return {
      count: 0,

      settingsTestriorityLabels: [],

I do not see why error and how to fix it as settingsTestriorityLabels is imported and defined ?

MODIFIED # 3 : I found in net examples I tried to fill my vue.config.js with contentL

module.exports = {
  settingsTaskPriorityLabels: [
    { key: 0, label: 'No' },
    { key: 1, label: 'Low' },
    { key: 2, label: 'Medium' },
    { key: 3, label: 'High' },
    { key: 4, label: 'Urgent' },
    { key: 5, label: 'Immediate' }
  ]
}

and got errors:

$ npm run serve

> [email protected] serve /mnt/_work_sdb8/wwwroot/lar/VApps/ctasks
> vue-cli-service serve

 ERROR  Invalid options in vue.config.js: "settingsTaskPriorityLabels" is not allowed

I tried some more examples, but failed all...

MODIFIED # 4 : I created ./app.settings.js with content :

settingsTaskPriorityLabels = [
  { key: 0, label: 'No' },
  { key: 1, label: 'Low' },
  { key: 2, label: 'Medium' },
  { key: 3, label: 'High' },
  { key: 4, label: 'Urgent' },
  { key: 5, label: 'Immediate' }
]

settingsJsMomentDatetimeFormat = 'Do MMMM, YYYY h:mm A'

But got errors :

 error  in ./app.settings.js

Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTaskPriorityLabels' is not defined (no-undef) at app.settings.js:1:1:
> 1 | settingsTaskPriorityLabels = [
    | ^
  2 |   { key: 0, label: 'No' },
  3 |   { key: 1, label: 'Low' },
  4 |   { key: 2, label: 'Medium' },


error: 'settingsJsMomentDatetimeFormat' is not defined (no-undef) at app.settings.js:10:1:
   8 | ]
   9 | 
> 10 | settingsJsMomentDatetimeFormat = 'Do MMMM, YYYY h:mm A'
     | ^
  11 |

Which syntax is valid ?

Tsepo Nkalai · Accepted Answer · 2019-11-17 09:25:56Z

1

Try creating a variable in data(){} then setting it equal to settingsTestriorityLabels

Are you sure you are importing correctly? I think you should change your import to

import { settingsTestriorityLabels } from ....

and

data() {
    return {
        ...
        testVar: settingsTestriorityLabels
    }
}

And then in the template

{{testVar}}

But I don't think that the vue.config.js file is where you should put your settingsTestriorityLabels setting, you can create another file to store these and import it. The vue.config.js file is for adding some configurations for @vue/cli when you build or test. Please have a look here https://cli.vuejs.org/config/#global-cli-config

edited Nov 17, 2019 at 9:25

answered Nov 16, 2019 at 13:46

Tsepo Nkalai

1,51412 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

mstdmstd Over a year ago

pLease, look MODIFIED # 2

Tsepo Nkalai Over a year ago

@mstdmstd just saw it and updated to show how I meant

mstdmstd Over a year ago

Thank you, that is clear with defintion of settingsTestriorityLabels in my component, but what is still unclear for me that is format of vue.config.js file. Asgot error in console or running npm run serve command. Please example how that file can be.

Tsepo Nkalai Over a year ago

@mstdmstd yes, the error ERROR Invalid options in vue.config.js: "settingsTaskPriorityLabels" is not allowed means that the configuration has something that does not belong to vue. Which is why i had mention that you create another different file not "vue.config.js" to put YOUR settings. Just create a file like say mysettings.js and put your code in there.

Tsepo Nkalai Over a year ago

@mstdmstd you forgot let or var or const before settingTaskPriorityLables = […]

|

Collectives™ on Stack Overflow

Valid format of /vue.config.js in vue/cli

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related