feat: support ANSI colors in ListItemInfo

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/ListItemInfo.vue

@@ -7,12 +7,12 @@
   >
     <div class="name">
       <slot name="name">
-        {{ name }}
+        <span v-html="ansiColors(name)"/>
       </slot>
     </div>
     <div v-if="description || link || showDescription" class="description">
       <slot name="description">
-        <span v-html="description"/>
+        <span v-html="ansiColors(description)"/>
       </slot>
       <a
         v-if="link"

packages/@vue/cli-ui/src/components/LoggerMessage.vue

@@ -12,17 +12,12 @@
   >
     <div v-if="message.type !== 'log'" class="type">{{ message.type }}</div>
     <div v-if="message.tag" class="tag">{{ message.tag }}</div>
-    <div class="message" v-html="formattedMessage"/>
+    <div class="message" v-html="ansiColors(message.message)"/>
     <div class="date">{{ message.date | date }}</div>
   </div>
 </template>
 
 <script>
-import AU from 'ansi_up'
-
-const ansiUp = new AU()
-ansiUp.use_classes = true
-
 export default {
   props: {
     message: {
@@ -34,12 +29,6 @@ export default {
       type: Boolean,
       default: false
     }
-  },
-
-  computed: {
-    formattedMessage () {
-      return ansiUp.ansi_to_html(this.message.message)
-    }
   }
 }
 </script>

packages/@vue/cli-ui/src/plugins.js

@@ -12,6 +12,7 @@ import ClientState from './mixins/ClientState'
 import SetSize from './util/set-size'
 import Focus from './util/focus'
 import Bus from './util/bus'
+import AnsiColors from './util/ansi-colors'
 
 Vue.use(InstantSearch)
 Vue.use(VueMeta)
@@ -37,6 +38,7 @@ Vue.use(VueObserveVisibility)
 Vue.use(SharedData)
 Vue.use(PluginAction)
 Vue.use(Bus)
+Vue.use(AnsiColors)
 
 for (const key in Filters) {
   Vue.filter(key, Filters[key])

packages/@vue/cli-ui/src/util/ansi-colors.js

@@ -0,0 +1,10 @@
+import AU from 'ansi_up'
+
+const ansiUp = new AU()
+ansiUp.use_classes = true
+
+export default {
+  install (Vue) {
+    Vue.prototype.ansiColors = text => ansiUp.ansi_to_html(text)
+  }
+}

packages/@vue/cli/lib/promptModules/router.js

@@ -1,3 +1,5 @@
+const chalk = require('chalk')
+
 module.exports = cli => {
   cli.injectFeature({
     name: 'Router',
@@ -10,7 +12,9 @@ module.exports = cli => {
     name: 'routerHistoryMode',
     when: answers => answers.features.includes('router'),
     type: 'confirm',
-    message: `Use history mode for router? (Requires proper server setup for index fallback in production)`
+    message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`,
+    description: `By using the HTML5 History API, the URLs don't need the '#' character anymore.`,
+    link: 'https://router.vuejs.org/guide/essentials/history-mode.html'
   })
 
   cli.onPromptComplete((answers, options) => {