Hello everyone, i want to use vuejs in my jira plugin. I already managed to include vue.js file in my plugin resources and one more js file with example of using vue with following code:
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Привет, Vue!’
}
})
In my page.vm i’m using following markup:
In my chrome console i see that there are Vue object and initialized “app” variable but nothing changes in markup inside div element. How to get it to work?
Looks like your code executes before #app element is generated.
Either listen to DOM ready event and execute your JavaScript after it, or move $webResourceManager.requireResource("com.atlassian.jira.vueapp:vueapp-resources"); this to just before </body> and it should work.
$webResourceManager.requireResourcesForContext("custom-context")
<div id="panel"> // will be preserved
<div id="mountpoint"> // will be replaced by the VueJS application
<span class="aui-icon aui-icon-wait">Loading...</span> // will show on page load until the resource have been loaded
</div>
</div>
import 'arrive';
import Vue from 'vue';
import { Panel } from './panel/';
// Make sure to wait until the page is done loading
document.arrive('#panel #mountpoint', () => new Panel().$mount('#panel #mountpoint'));
You can use atlassian-webresource-webpack-plugin to download and bundle NPM packages via webpack, or you can download libraries such as Vue yourself and bundle it in the plugins resource folder