A vue file in my project has bee too big. I wanted to seperate its script section into a js file. In js file, I export the Vue object;

export default new Vue({
  data: {
    search: "",
    ...

And import it in the Vue file;

<script src="./RecordNameTable.js">
</script>

But this is not working, it gives errors. I can import it as a .vue file which has the classic Vue syntax between <script></script> tags. But I do not want this. How to solve this problem?

A vue file in my project has bee too big. I wanted to seperate its script section into a js file. In js file, I export the Vue object;

export default new Vue({
  data: {
    search: "",
    ...

And import it in the Vue file;

<script src="./RecordNameTable.js">
</script>

But this is not working, it gives errors. I can import it as a .vue file which has the classic Vue syntax between <script></script> tags. But I do not want this. How to solve this problem?

• javascript
• vue.js
• vuejs2

• try to replace export default with module.exports = new Vue({... and can you share the errors that shows? – Ghyath Darwish Commented Sep 12, 2019 at 11:14
• Is it a single file ponent with .vue extension? – Mahmudur Rahman Commented Sep 12, 2019 at 11:28
• @GhyathDarwish this error thrown when module.exports is used; Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' – dreyzz Commented Sep 12, 2019 at 11:34
• @PrisonerRaju yes – dreyzz Commented Sep 12, 2019 at 11:34
• You may try to force type="module" on your script tag. Doc: developer.mozilla/en-US/docs/Web/JavaScript/Guide/Modules – Sackey Commented Sep 12, 2019 at 11:35

4 Answers 4

You have to export an object from your external script, Not a Vue instance.

Here is a simple solution

App.vue

<template>
    <div>
        {{ message }}
    </div>
</template>

// This will work
<script src="./app.js"></script>

// this will work too
<script>
    import App from './app.js';

    export default App;
</script>

app.js

export default {
    data(){
        return {
            message: "Hello world"
        };
    }
}

You solve the problem by dropping the "But I do not want this." attitude and simply use the only available solution at this point:

<script>
    import Obj from 'location';

    export default Obj;
</script>

For vue 3 using Object Destructuring

<script>
import File_script from "./file_script.js";

export default {...File_script}
</script>

If it's bee too big the correct approach is to break your template down into further ponents, not simply move the problem (and making it worse) by moving the script section to another file. You're approaching this wrong.