Vue Vuetify

THIS IS CURRENTLY A FEATURE, WHICH IS DEVELOPED IN BRANCH feature/vue AND THAT PAGE IS CURRENTLY UNDER CONSTRUCTION!

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

Global apps

First create a global app, as described here.

The following files will be created:

Name	Description
.egoignore	Is used to ignore the files, which should not be saved, when you create a package of the app.
app.vue	The vue file, where you can define and setup your <template>, <script> and <style> tags.
index.js	The Node.js script that is used as a bridge between Visual Studio Code and the web view.
LICENSE	The license, you would like to use for your app.
package.json	The package file, with all meta data. This is also required, if you need additional npm packages for your app. In that case the file contains a vue property with a (true) value, which indicates to use Vue instead of jQuery.
README.md	Describe your app here (with Markdown).

Workspace apps

First create a workspace app, as described here.

You additionally have to define the vue property in the settings.json file with a value of (true):

{
    "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://egodigital.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
                    // 'ego_on_loaded()' function
                    // in 'my_vuetify_app.vue'

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

                    // send this back to 'my_vuetify_app.ejs'
                    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://egodigital.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://egodigital.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 class="ego-test">{{ last_message_from_js_file }}</pre>
    </v-container>
</template>

<script>

// the page searches for a '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);
        },
    },
};

</script>

<style>

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

</style>