Merge branch 'issue-title-vue-sfc' into 'master'

Issue Title Vue: convert to .vue - use 'render' with 'createElement' in index

See merge request !10625

5 files changed, 24 insertions, 25 deletions

diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index b6ce8e83729..4d491e70d83 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,26 +1,20 @@
 import Vue from 'vue';
-import IssueTitle from './issue_title';
+import IssueTitle from './issue_title.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-const vueOptions = () => ({
-  el: '.issue-title-entrypoint',
-  components: {
-    IssueTitle,
-  },
-  data() {
-    const issueTitleData = document.querySelector('.issue-title-data').dataset;
+(() => {
+  const issueTitleData = document.querySelector('.issue-title-data').dataset;
+  const { initialTitle, endpoint } = issueTitleData;
 
-    return {
-      initialTitle: issueTitleData.initialTitle,
-      endpoint: issueTitleData.endpoint,
-    };
-  },
-  template: `
-    <IssueTitle
-      :initialTitle="initialTitle"
-      :endpoint="endpoint"
-    />
-  `,
-});
+  const vm = new Vue({
+    el: '.issue-title-entrypoint',
+    render: createElement => createElement(IssueTitle, {
+      props: {
+        initialTitle,
+        endpoint,
+      },
+    }),
+  });
 
-(() => new Vue(vueOptions()))();
+  return vm;
+})();
diff --git a/app/assets/javascripts/issue_show/issue_title.js b/app/assets/javascripts/issue_show/issue_title.vue
index 1184c8956dc..ba54178a310 100644
--- a/app/assets/javascripts/issue_show/issue_title.js
+++ b/app/assets/javascripts/issue_show/issue_title.vue
@@ -1,3 +1,4 @@
+<script>
 import Visibility from 'visibilityjs';
 import Poll from './../lib/utils/poll';
 import Service from './services/index';
@@ -72,7 +73,9 @@ export default {
   created() {
     this.fetch();
   },
-  template: `
-    <h2 class='title' v-html='title'></h2>
-  `,
 };
+</script>
+
+<template>
+  <h2 class="title" v-html="title"></h2>
+</template>
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 885795ccb5c..fcbd8829595 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -79,4 +79,5 @@
 
 = render 'shared/issuable/sidebar', issuable: @issue
 
+= page_specific_javascript_bundle_tag('common_vue')
 = page_specific_javascript_bundle_tag('issue_show')
diff --git a/config/webpack.config.js b/config/webpack.config.js
index ffb16190093..64a04dc342e 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -125,6 +125,7 @@ var config = {
         'notebook_viewer',
         'pdf_viewer',
         'vue_pipelines',
+        'issue_show',
       ],
       minChunks: function(module, count) {
         return module.resource && (/vue_shared/).test(module.resource);
diff --git a/spec/javascripts/issue_show/issue_title_spec.js b/spec/javascripts/issue_show/issue_title_spec.js
index 806d728a874..03edbf9f947 100644
--- a/spec/javascripts/issue_show/issue_title_spec.js
+++ b/spec/javascripts/issue_show/issue_title_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import issueTitle from '~/issue_show/issue_title';
+import issueTitle from '~/issue_show/issue_title.vue';
 
 describe('Issue Title', () => {
   let IssueTitleComponent;