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:

<html>
  <head>
    <title>My Admin</title>
    $webResourceManager.requireResource("com.atlassian.jira.vueapp:vueapp-resources");
    <meta name="decorator" content="atl.general">

  </head>
  <body>
       <div id="app">
       {{ message }}
      </div>
  </body>
</html>

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:

panel.vm

$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>

atlassian-plugin.xml

    <web-panel key="panel" name="${project.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-panel>
...
    <web-resource name="${project.name} - Generic - Static Resources" key="panel-resources">
        <dependency>jira.webresources:jira-global</dependency>
        <dependency>jira.webresources:global-static</dependency>

        <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>
        <resource type="download" name="panel.css" location="${resources.dir}/static/panel.css">
            <param name="batch" value="false"/>
            <property key="content-type" value="text/css"/>
        </resource>

        <context>custom-context</context>
    </web-resource>

index.ts

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

./panel/index.ts

import Vue from 'vue';
export const Panel = Vue.extend({
    template,
    data,
    etc
});

Hope it helps!

2 Likes

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

Cheers

A

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 (https://community.atlassian.com/t5/Jira-articles/React-and-Atlaskit-in-Atlassian-Server-Data-center-apps-Part-1/ba-p/1374271#M2703)

1 Like