diff --git a/packages/@vue/cli-service/lib/commands/build/demo-lib.html b/packages/@vue/cli-service/lib/commands/build/demo-lib.html
index e916d2d975..f6513ecfde 100644
--- a/packages/@vue/cli-service/lib/commands/build/demo-lib.html
+++ b/packages/@vue/cli-service/lib/commands/build/demo-lib.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title><%- htmlWebpackPlugin.options.libName %> demo</title>
-<script src="https://unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@<%- htmlWebpackPlugin.options.vueMajor %>"></script>
 <script src="./<%- htmlWebpackPlugin.options.assetsFileName %>.umd.js"></script>
 <% if (htmlWebpackPlugin.options.cssExtract) { %>
 <link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.assetsFileName %>.css">
@@ -12,9 +12,17 @@
 </div>
 
 <script>
+<% if (htmlWebpackPlugin.options.vueMajor === 3) { %>
+Vue.createApp({
+  components: {
+    demo: <%- htmlWebpackPlugin.options.libName %>
+  }
+}).mount('#app')
+<% } else { %>
 new Vue({
   components: {
     demo: <%- htmlWebpackPlugin.options.libName %>
   }
 }).$mount('#app')
+<% } %>
 </script>
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
index 971b2eba8f..4210bac0aa 100644
--- a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
+++ b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
@@ -9,6 +9,8 @@ module.exports = (api, { entry, name, formats, filename, 'inline-vue': inlineVue
     process.exit(1)
   }
 
+  const vueMajor = require('../../util/getVueMajor')(api.getCwd())
+
   const fullEntryPath = api.resolve(entry)
 
   if (!fs.existsSync(fullEntryPath)) {
@@ -66,6 +68,7 @@ module.exports = (api, { entry, name, formats, filename, 'inline-vue': inlineVue
             inject: false,
             filename: 'demo.html',
             libName,
+            vueMajor,
             assetsFileName: filename,
             cssExtract: config.plugins.has('extract-css')
           }])
