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

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

See merge request !10625

app/assets/javascripts/issue_show/index.js

 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;
+})();

app/assets/javascripts/issue_show/issue_title.js → app/assets/javascripts/issue_show/issue_title.vue

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

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

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

spec/javascripts/issue_show/issue_title_spec.js

 import Vue from 'vue';
-import issueTitle from '~/issue_show/issue_title';
+import issueTitle from '~/issue_show/issue_title.vue';
 
 describe('Issue Title', () => {
   let IssueTitleComponent;