-
Notifications
You must be signed in to change notification settings - Fork 15
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.
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). |
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
// 'mounted()' hook
// 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);
},
},
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>
#ego-test {
color: #ffffff;
background-color: red;
font-weight: bold;
}
</style>
Logs a message.
Asks the user in Visual Studio Code, if an external URL should be opened.
Posts a command with (optional) data from the web view to the app (script).
Checks if a value is null
or undefined
.
Logs a message.
Asks the user in Visual Studio Code, if an external URL should be opened.
Posts a command with (optional) data from the web view to the app (script).
Converts a value to a string, which is NOT null
or undefined
.
licensed under GDFL 1.3 - © e.GO Digital GmbH