How do I use outsourced and editable scripts in Nuxt.js?

Question

I am currently developing a website with Nuxt. A certain javascript file should be editable after building to change the content of a table. Does anyone have an idea how I can do this?

Up to now I tried to include the javascript file as plugin without success. Furthermore, I also failed the attempt to swap the script as follows:

<!-- my-component.vue -->
<template>
  <div>This is a Text!</div>
</template>
<script src="./my-outsourced-script.js"></script>

Currently my Code looks like this:

Bootstrap-Vue table:

<b-table
        borderless
        striped
        hover
        responsive
        :sticky-header="stickyHeader"
        :items="folderPermissions"
        :fields="folderGroups"
      >
</b-table>

Content to be swapped out:

export default {
  data() {
    return {
      stickyHeader: true,
      keyword: '',
      sortBy: 'xxx',
      sortDesc: false,
      folderGroups: [
        {
          key: 'drive',
          stickyColumn: true,
          label: ' ',
          isRowHeader: true
        },
        ...
      ],
      folderPermissions: [
        {
          drive: 'Some Text',
          id: 0,
          a: 1
        },
        ...
      ]
    }
  }
}

My wish would be to have folderGroups and folderPermissions in the code shown above in an outsourced javascript file to easily modify them and see the changes on the website.

ManUtopiK · Accepted Answer · 2019-09-05T13:47:53.883

0

Like you do, or if you try to import your js file with your data like import { folderGroups, folderPermissions} from './my-outsourced-script.js, you cannot change the file without rebuild your nuxt app.

Try to build with your file as below:

{
"folderGroups": [
    your datas
  ],
"folderPermissions": [
    your datas
  ]
}

And dynamic import in your component:

data() {
  folderGroups: [],
  folderPermissions: []
},
mounted() {
  this.$http.get('/js/my-outsourced-script.json').then((response) => { // no need `assets`
    console.log(response.body)
    this.folderGroups = response.body.folderGroups
    this.folderPermissions = response.body.folderPermissions
  }, function (error) {
    console.log(error.statusText)
  })
}

edited Sep 05 '19 at 13:47

answered Sep 05 '19 at 12:04

ManUtopiK

4,495
3
38
52

I think I'm acting a little stupid. So currently I've inserted your code like this: export in my component: [Pastebin to my component](https://pastebin.com/raw/VvE3rCLf) my-outsourced-script.js: [Pastebin to my js file](https://pastebin.com/raw/Zi7kMXVv) When I now run nuxt generate, I get a SyntaxError in my outsourced js file due to the ":" – Laptop User Sep 05 '19 at 12:43
Sorry, I was too fast. I refactored the code, and use json instead. – ManUtopiK Sep 05 '19 at 13:48
All right, thanks! Unfortunately the content is still not shown to me. The following error appears in the console: `TypeError: "this.$http is undefined"` Could this be because I am running `npx nuxt generate`? – Laptop User Sep 05 '19 at 14:11
`$http` is an alias of `$axios`, you can use `$axios` instead. Do you use axios? Or you can use directly fetch. Replace `this.$http.get` by `fetch`. – ManUtopiK Sep 05 '19 at 14:14
Sorry for the late answer. I took fetch now and generated the whole thing. However, the following error always occurs in the console of the browser: `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/xxx/json/my-outsourced-json.json. (Reason: CORS request not http).` Do I have to change anything to get it to work locally? – Laptop User Sep 06 '19 at 05:58
Solved it: added in `nuxt.config.js` - `{ src: './json/folderTableContents.js' }` to head and converted json content to const (js). In `mounted()`I've only added these two lines: `this.folderGroups = JSONDATA.folderGroups` `this.folderPermissions = JSONDATA.folderPermissions`. (JSONDATA is the name of const in old json file) – Laptop User Sep 09 '19 at 07:15

How do I use outsourced and editable scripts in Nuxt.js?

1 Answers1