How to include vuejs in jira plugin properly?

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:

    <title>My Admin</title>
    <meta name="decorator" content="atl.general">

       <div id="app">
       {{ message }}

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.

Here is what I’ve done:



<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


    <web-panel key="panel" name="${} - Panel" location="webpanels.admin.summary.right-panels" weight="1000">
        <label key="Panel" />
        <resource name="view" type="velocity" location="${resources.dir}/panel.vm" />
        <param name="key" value="panel" />
    <web-resource name="${} - Generic - Static Resources" key="panel-resources">

        <resource type="download" name="assets/" location="${resources.dir}/static/assets"/>
        <resource type="download" name="panel.js" location="${resources.dir}/static/panel.js">
            <param name="batch" value="false"/>
            <property key="content-type" value="application/javascript"/>
        <resource type="download" name="panel.css" location="${resources.dir}/static/panel.css">
            <param name="batch" value="false"/>
            <property key="content-type" value="text/css"/>



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'));


import Vue from 'vue';
export const Panel = Vue.extend({

Hope it helps!


@remie I do have one question though. What’s the best way to handle resource paths when using Vue.js within JIRA this way?



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

1 Like

Yeah that’s exactly what I’m currently doing for a new BitBucket plugin development using React rather than Vue.js!
Shout-out to Alexey Matveev for his blog series about this (

1 Like