Vue with TypeScript without components

Question

I encountered with problem when develop application. I use Vue + Vuetify with typescript, but I don't want to create SPA application or use webpack for work with .vue components, I need to create several page, where I create each times new Vue instance. But when I create for example

import * as Vue from 'Vue';
import axios from 'axios';

<any>window.vue = new Vue({
    el: "#app",
    data: {
        drawer: true,
        mini: false,
        totalItems: 0,
        items: [],
        headers: [,
            {
                text: 'Dessert (100g serving)',
                align: 'left',
                sortable: false,
                value: 'name'
            },
            { text: 'Calories', value: 'calories' },
            { text: 'Fat (g)', value: 'fat' },
        ],

    },
methods: {

    getData() {
        axios.get("http://exmaple1234.com/api/list")
            .then((response) => {
                this.$data["totalItems"] = 1;
                this.$data["items"] = [
                    {
                        value: false,
                        name: 'Frozen Yogurt',
                        calories: 159,
                        fat: 6.0,
                    }
                ];
            })
    }
},
mounted() {
    this.$options.methods["getData"].call("getData");

},
});

My tsconfig.json

{
  "compilerOptions": {
    "alwaysStrict": true,
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": false,
    "target": "es5",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "lib": [ "es2017", "dom", "dom.iterable" ]
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": true
}

With typescript I can't use this.totalItems, this.items and I can't call this.getData() in mounted(), but when I debug in browser my code, I see that object "this" has all these properties and methods.

I use property $data["property"] name and $options.methods["methodName"] in order to work with it, but I understand that isn't correct approach. I read in Vue documentation about ComponentOptions which help to create interface or vue-class-component, but all these tools use components, which I want to avoid.

Can I use vue + typescript in this case? I'd appreciate tips to my question

Phil Phil · Accepted Answer · 2017-09-06T12:18:48

I've added an Interface to describe all data attributes and methods. Add this.getData();/this.$options.methods["getData"].call(this); and created an new vue instance.

import * as Vue from 'Vue';
import axios from 'axios';

interface AppInterface extends Vue {
    drawer: boolean,
    mini: boolean,
    totalItems: number,
    items: any,
    headers: any,
    getData (): void
}

var App = {
    el: "#app",
    data: {
        drawer: true,
        mini: false,
        totalItems: 0,
        items: [],
        headers: [{
                text: 'Dessert (100g serving)',
                align: 'left',
                sortable: false,
                value: 'name'
            }, {
                text: 'Calories',
                value: 'calories'
            }, {
                text: 'Fat (g)',
                value: 'fat'
            }
        ]
    },
    methods: {
        getData() {
            axios
                .get("http://exmaple1234.com/api/list")
                .then((response) => {
                    this.$data["totalItems"] = 1;
                    this.$data["items"] = [
                        {
                            value: false,
                            name: 'Frozen Yogurt',
                            calories: 159, 
                            fat: 6.0
                        }
                    ];  
                })
        }
    },
    mounted() {
        // or this.$options.methods["getData"].call(this);
        this.getData();
    }
} as Vue.ComponentOptions<AppInterface>

// new vue instance
new Vue(App);

Vue with TypeScript without components

1 Answers