diff --git a/packages/@vuepress/markdown/lib/containers.js b/packages/@vuepress/markdown/lib/containers.js
index 215c453491..0ee6be8037 100644
--- a/packages/@vuepress/markdown/lib/containers.js
+++ b/packages/@vuepress/markdown/lib/containers.js
@@ -11,6 +11,11 @@ module.exports = md => {
         ? `<div v-pre>\n`
         : `</div>\n`
     })
+    .use(container, 'vue', {
+      render: (tokens, idx) => tokens[idx].nesting === 1
+        ? `<pre class="vue-container"><code>`
+        : `</code></pre>`
+    })
 }
 
 function createContainer (klass, defaultTitle) {
diff --git a/packages/@vuepress/theme-default/styles/custom-blocks.styl b/packages/@vuepress/theme-default/styles/custom-blocks.styl
index 3ccc2df2a2..830c144403 100644
--- a/packages/@vuepress/theme-default/styles/custom-blocks.styl
+++ b/packages/@vuepress/theme-default/styles/custom-blocks.styl
@@ -26,3 +26,15 @@
       color darken(red, 40%)
     a
       color $textColor
+
+pre.vue-container
+  background-color: #f3f5f7 !important;
+  color: #2c3e50 !important;
+  border-left-width: .5rem;
+  border-left-style: solid;
+  border-color: #42b983;
+  code
+    color: #2c3e50 !important;
+    font-size: 14px !important;
+    & > p
+      margin: -20px 0;