How to expose data to the outside, with a Typescript Vue component?

0
votes

When using typescript with singlefile components, I'm having trouble to adjust the data from outside the Vue app.

I have a Main.ts where a new Vue is declared, but allocating it to a variable doesn't give me that variable available. So var x = new Vue(){...} in Main.ts is not working

I Tried making variables public in my .vue file, I know I can select the element with app.__vue__ but it has not variables that are declared in the .vue file, only when I initialize the variable in the main.ts file, I see them, but the do not get rendered by the component template.

Main.ts:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

App.vue script:

export default class App extends Vue {
  search: string = "";
}

When I see the JavaScript implementations, I can go from the console and adjust properties by calling th variable bound to the Vue App like var x = new Vue() {...}, but I cant seem to get this to work in TypeScript

2
typescriptvue.jsvue-component

2 Answers

0
votes

Typescript is a superset of JavaScript. That means it only adds to it, it doesn't remove from it. Anything you can do in JavaScript you can also do in Typescript.

That said - if you wish to access the Vue instance in a global way, you just assign it to the window:

(window as Window).Vue = new Vue({ 
  render: (h) => h(App),
}).$mount('#app');

^ You may have to shim that in for Typescript not to explode based on your settings.

Furthermore, variables declared with var are not inherently available outside the scope of the executing file. This is done on purpose as not to pollute as a global. If you really needed access to it, you could also export it from the file and import it elsewhere.

0
votes

This is the eventual solution I came up with:

let instance = new Vue({
  render: (h) => h(App)
}).$mount('#app');

(<any>window).vueInstance = instance.$children[0];

now I can access my component with vue instance.