How to use vue object in multiple .vue files

Question

I have built a Vue Router-scaffolding using Vue CLI GUI by installing Vue CLI

In my App.vue I import my Navigation.vue-component file. Besides that I have a view called Home.vue in which I implement another component called Teams.vue in which I load some data from a .json file using the fetch API.

I want to use various properties, methods,... contained inside a Vue object that's located inside teams.js in multiple files without needing to copy / paste the code in all my vue files.

 let app = new Vue({ ...

Adding the file through a script tag inside the Navigation renders my app blank.

project tree

Answer 1

You can export the variable at the end of teams.js:

export default app;

and import it in Navigation.vue:

import app from "@/teams.js";