How do I access data from an external file in Vue.js?

Question

Still new to Vue.js, but very much enjoying to learn about it. Before I get to using Axios and Vuex store I'd like to understand how can I send some test data from a separate file to my component? Hope someone can help.

If I do this within my component it works:

<script>

export default {
    data () {
        return {
        logItems: [
            { log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
        }
    }
}

But I assumed I could import it as follows from an external file:

import logs from '~/components/testdata.vue'
export default {
    data () {
        return {
        logitems: logs
        }
    }
}

And in my testdate.vue file I have:

<script>
export default {
    data () {
        return {

        // Dummy Test Data
        logs: [
            { log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
        }
        return logs
    }
}

Is anyone able to tell me what am I doing wrong and why putting my data into a separate file doesn't work, please?

Many thanks.

What is displayed when you console.log your existing import? If I'm not mistaken when you require a .vue Component the resulting data property is accessible as a static reference usually within something simmilar to logs.data().logs in your case. — li x
– li x, Commented Jun 6, 2018 at 8:52

Abhishek Gupta · Accepted Answer · 2018-06-06 08:49:27Z

15

When you import any file, webpack uses an appropriate loader (specified in your webpack.config.js) to build the file. In case it is a .vue file, it uses vue-loader to build the file and return a Vue component. You need an Array containing your data, not a vue component. You can import simple .js and .json files for this.

Instead of importing a .vue file. you can just import .json or .js file.

data.js

const data = [{ log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
export default data;

component.vue

import logs from 'data.js'
export default {
    data () {
        return {
        logitems: logs
        }
    }
}

edited Jun 6, 2018 at 8:49

answered Jun 6, 2018 at 8:44

Abhishek Gupta

1,32713 silver badges28 bronze badges

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

7 Comments

li x Over a year ago

This doesn't actually answer op's post.

Abhishek Gupta Over a year ago

Updated the answer.

Sven Delueg Over a year ago

how can i proceed if i have to use "this" inside array to get translations for example?

Abhishek Gupta Over a year ago

@delueg can give me an example? i don't get exactly how you are planning to use "this" inside array.

Sven Delueg Over a year ago

@AbhishekGupta i managed to get it work with mixins. Thanks. I wanted to access "this[in context of vue]" in order to set values to the array

|

tony19 · Accepted Answer · 2022-07-15 22:03:52Z

3

Explainations

If you are using Vue template files, you can use the script tag src's attribute just like you would normally do with any other scripts in your HTML page.

Since Webpack is doing some special stuff when you import a Vue template file, for instance example.vue, you have to explode your configuration to extract the JavaScript part, that should not be compiled by the vue-loader.

Example

index.vue

<template><!-- ... --></template>
<script src='index.js'></script>
<style scoped>/* ... */</style>

index.js

export default {
  data() {
    return {
      //...
    };
  }
};

something.js

import stuff from '../stuff/index.js';

export default {
  data() {
    return ...stuff.data();
  }
};

Online Example

External Resources

See What-About-Separation-of-Concerns

edited Jul 15, 2022 at 22:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 6, 2018 at 10:30

Amin NAIRI

2,52423 silver badges22 bronze badges

1 Comment

li x Over a year ago

This is what I was referring to in the comments, this is generally how you would go about importing external data from a .vue component.

theking2 · Accepted Answer · 2024-04-02 14:12:45Z

0

I personally do it in the following way:

data.js

export default {
  Variables...
}

WebPage.vue

import { default as data } from "./data";
export default{
 data(){
  return data;
 }
}

edited Apr 2, 2024 at 14:12

theking2

3,1012 gold badges36 silver badges51 bronze badges

answered Jun 8, 2019 at 17:04

eberlast

1802 silver badges7 bronze badges

Collectives™ on Stack Overflow

How do I access data from an external file in Vue.js?

3 Answers 3

7 Comments

Explainations

Example

Online Example

External Resources

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Explainations

Example

Online Example

External Resources

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related