diff --git a/examples/with-vux/layouts/default.vue b/examples/with-vux/layouts/default.vue
new file mode 100644
index 0000000000..cc972b0ae7
--- /dev/null
+++ b/examples/with-vux/layouts/default.vue
@@ -0,0 +1,9 @@
+<template>
+  <nuxt></nuxt>
+</template>
+
+<style>
+body {
+  background-color: #fbf9fe;
+}
+</style>
\ No newline at end of file
diff --git a/examples/with-vux/nuxt.config.js b/examples/with-vux/nuxt.config.js
new file mode 100644
index 0000000000..ff07ba04b9
--- /dev/null
+++ b/examples/with-vux/nuxt.config.js
@@ -0,0 +1,39 @@
+const vuxLoader = require('vux-loader')
+const path = require('path')
+
+module.exports = {
+  head: {
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=0' }
+    ]
+  },
+  css: [
+    'vux/src/styles/reset.less',
+    'vux/src/styles/1px.less'
+  ],
+  plugins: [
+    {
+      src: '~/plugins/vux-plugins',
+      ssr: false
+    },
+    {
+      src: '~/plugins/vux-components',
+      ssr: true
+    }
+  ],
+  build: {
+    extend(config, { isDev, isClient }) {
+      const configs = vuxLoader.merge(config, {
+        options: {
+          ssr: true
+        },
+        plugins: ['vux-ui', {
+          name: 'less-theme',
+          path: path.join(__dirname, './styles/theme.less')
+        }]
+      })
+      return configs
+    }
+  }
+}
diff --git a/examples/with-vux/package.json b/examples/with-vux/package.json
new file mode 100644
index 0000000000..7684d25bd7
--- /dev/null
+++ b/examples/with-vux/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "with-vux",
+  "version": "1.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "nuxt": "latest",
+    "vux": "^2.8.0"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "devDependencies": {
+    "less": "^2.7.3",
+    "less-loader": "^4.0.6",
+    "vux-loader": "^1.2.1"
+  }
+}
diff --git a/examples/with-vux/pages/index.vue b/examples/with-vux/pages/index.vue
new file mode 100644
index 0000000000..5d16695816
--- /dev/null
+++ b/examples/with-vux/pages/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <group title="vux demo">
+      <cell title="cell" value="click me" is-link @click.native="alert"></cell>
+    </group>
+  </div>
+</template>
+
+
+<script>
+export default {
+  head() {
+    return {
+      title: 'vux demo'
+    }
+  },
+  methods: {
+    alert() {
+      this.$vux.alert.show('This is a Alert example.')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/examples/with-vux/plugins/vux-components.js b/examples/with-vux/plugins/vux-components.js
new file mode 100644
index 0000000000..b6a978aa8e
--- /dev/null
+++ b/examples/with-vux/plugins/vux-components.js
@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import { Group, Cell } from 'vux'
+
+Vue.component('group', Group)
+Vue.component('cell', Cell)
diff --git a/examples/with-vux/plugins/vux-plugins.js b/examples/with-vux/plugins/vux-plugins.js
new file mode 100644
index 0000000000..ff22a2598e
--- /dev/null
+++ b/examples/with-vux/plugins/vux-plugins.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import { BusPlugin, TransferDom, WechatPlugin, DatetimePlugin, LoadingPlugin, ToastPlugin, AlertPlugin, ConfirmPlugin } from 'vux'
+
+Vue.use(DatetimePlugin)
+Vue.use(LoadingPlugin)
+Vue.use(ToastPlugin)
+Vue.use(AlertPlugin)
+Vue.use(ConfirmPlugin)
+Vue.use(WechatPlugin)
+Vue.use(BusPlugin)
+
+Vue.directive('transfer-dom', TransferDom)
diff --git a/examples/with-vux/styles/theme.less b/examples/with-vux/styles/theme.less
new file mode 100644
index 0000000000..88c363007e
--- /dev/null
+++ b/examples/with-vux/styles/theme.less
@@ -0,0 +1 @@
+@dialog-button-text-primary-color: #FF9900;
\ No newline at end of file