Vue Vuetify

Instead of creating apps with MD Bootstrap and jQuery, you can also implement them in Vue and Vuetify.

Global apps

Workspace apps

Create an apps section, if needed, to the settings.json file in the .vscode sub folder of your workspace and add one or more entries:

{
    "ego.power-tools": {
        "apps": [
            {
                "name": "My Vuetify app",
                "description": "My awesome Vuetify app",
                "script": "my_vuetify_app.js",

                "vue": true
            }
        ]
    }
}

For that example first create the my_vuetify_app.js file in your .vscode folder and use the following skeleton:

/**
 * Is invoked on an event.
 */
exports.onEvent = async (args) => {
    // args => s. https://egomobile.github.io/vscode-powertools/api/interfaces/_contracts_.appeventscriptarguments.html

    // s. https://code.visualstudio.com/api/references/vscode-api
    const vscode = args.require('vscode');

    switch (args.event) {
        case 'on.command':
            // is invoked, when the web view has
            // been post a (command) message
            {
                if ('hello_from_webview_command' === args.data.command) {
                    // this has been send from
                    // 'mounted()' hook
                    // in 'my_vuetify_app.vue'

                    vscode.window.showInformationMessage(
                        'From "my_vuetify_app.vue": ' + JSON.stringify(args.data.data, null, 2)
                    );

                    // send this back to 'my_vuetify_app.vue'
                    await args.post('hello_back_from_extension', {
                        'message': 'Hello, Otto!'
                    });
                }
            }
            break;
    }
};


/**
 * This returns the title, which is displayed in the tab
 * of the web view.
 */
exports.getTitle = (args) => {
    // args => https://egomobile.github.io/vscode-powertools/api/interfaces/_contracts_.appeventscriptarguments.html

    return "My Vuetify app";
};

/**
 * This returns the Vue content for the body.
 */
exports.getHtml = (args) => {
    // args => https://egomobile.github.io/vscode-powertools/api/interfaces/_contracts_.appeventscriptarguments.html

    return args.readTextFile(
        __dirname + '/my_vuetify_app.vue'
    );
};

Then setup a my_vuetify_app.vue file, in the same directory as the code-behind script:

<template>
    <v-container fluid>
        <h1>My Vuetify app</h1>

        <pre id="ego-test">
            <span>{{ last_message_from_js_file }}</span>
        </pre>
    </v-container>
</template>

<script>

// the web view searches for a global 'PAGE' variable or constant, which
// contains an object, that works the same way as described here:
// https://vuejs.org/v2/guide/instance.html
const PAGE = {
    data: function() {
        return {
            last_message_from_js_file: 'n.a.',
        };
    },    

    methods: {
        // this is a special hook, used by the extension
        // to receive messages from code-behind (.js file), which
        // is directly connected to Visual Studio Code instance
        $onCommand: function(command, data) {
            // command => The name of the command
            //            from 'onEvent' function in '.js' file
            // data    => The (optional) data
            //            from 'onEvent' function in '.js' file

            this.last_message_from_js_file =
                'From "my_vuetify_app.js": ' + JSON.stringify([command, data], null, 2);
        },
    },

    mounted: function() {
        // this sends data to
        // 'onEvent' function of
        // 'my_vuetify_app.js' file
        this.$post('hello_from_webview_command', {
            'message': 'Hello, Echo!'
        });
    },
};

</script>

<style lang="scss">

#ego-test {
    span {
        color: #ffffff;
        background-color: red;
        font-weight: bold;
    }
}

</style>

Scripting

Web View

Build-in Vue methods

$log( msg )

Logs a message.

$openUrl( url, text )

Asks the user in Visual Studio Code, if an external URL should be opened.

$post( command, data )

Posts a command with (optional) data from the web view to the app (script).

Functions

s. app.vuetify.js

ego_is_nil( val )

Checks if a value is null or undefined.

ego_log( msg )

Logs a message.

ego_open_external_url( url, text )