diff --git a/README.md b/README.md
index 72e969fdc2..28d0c2ccd0 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@
+
> Nuxt.js is a framework for server-rendered Vue applications (inspired by [Next.js](https://github.com/zeit/next.js))
## 🚧 Under active development, 1.0 will be released soon :fire:
diff --git a/examples/with-vuetify/README.md b/examples/with-vuetify/README.md
index 4873ceb77b..04bf622643 100644
--- a/examples/with-vuetify/README.md
+++ b/examples/with-vuetify/README.md
@@ -1,4 +1,6 @@
# Using Vuetify.js with Nuxt.js
-https://nuxtjs.org/examples/with-vuetify
+https://nuxtjs.org/examples/with-vuetify
https://vuetifyjs.com/
+
+*NOTE: Some Vuetify components needs Vue v2.2.x (or later) to work properly (Nuxt currently uses v2.1.x)*
diff --git a/examples/with-vuetify/css/app.styl b/examples/with-vuetify/css/app.styl
new file mode 100644
index 0000000000..0b24ada921
--- /dev/null
+++ b/examples/with-vuetify/css/app.styl
@@ -0,0 +1 @@
+@require './vendor/vuetify.styl'
diff --git a/examples/with-vuetify/css/vendor/vuetify.styl b/examples/with-vuetify/css/vendor/vuetify.styl
new file mode 100644
index 0000000000..6865590deb
--- /dev/null
+++ b/examples/with-vuetify/css/vendor/vuetify.styl
@@ -0,0 +1,14 @@
+// Specify overrides (theme and/or base variables etc.)
+// See https://vuetifyjs.com/quick-start
+$theme := {
+ primary: #9c27b0
+ accent: #ce93d8
+ secondary: #424242
+ info: #0D47A1
+ warning: #ffb300
+ error: #B71C1C
+ success: #2E7D32
+}
+
+// Import Vuetify styling
+@require '~vuetify/src/stylus/main.styl'
diff --git a/examples/with-vuetify/layouts/default.vue b/examples/with-vuetify/layouts/default.vue
deleted file mode 100644
index 3f33e63651..0000000000
--- a/examples/with-vuetify/layouts/default.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
-
-
diff --git a/examples/with-vuetify/nuxt.config.js b/examples/with-vuetify/nuxt.config.js
index bd26adf454..9edc6811ef 100644
--- a/examples/with-vuetify/nuxt.config.js
+++ b/examples/with-vuetify/nuxt.config.js
@@ -1,7 +1,18 @@
+
+const { join } = require('path')
+
module.exports = {
build: {
vendor: ['vuetify']
},
plugins: ['~plugins/vuetify.js'],
- css: ['vuetify/dist/vuetify.min.css']
+ css: [
+ { src: join(__dirname, 'css/app.styl'), lang: 'styl' }
+ ],
+ head: {
+ link: [
+ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' },
+ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
+ ]
+ }
}
diff --git a/examples/with-vuetify/package.json b/examples/with-vuetify/package.json
index 0ee9083525..908878ba03 100644
--- a/examples/with-vuetify/package.json
+++ b/examples/with-vuetify/package.json
@@ -8,5 +8,9 @@
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
+ },
+ "devDependencies": {
+ "stylus": "^0.54.5",
+ "stylus-loader": "^3.0.1"
}
}
diff --git a/examples/with-vuetify/pages/index.vue b/examples/with-vuetify/pages/index.vue
index 5aeb83257a..8551eaff81 100644
--- a/examples/with-vuetify/pages/index.vue
+++ b/examples/with-vuetify/pages/index.vue
@@ -16,7 +16,12 @@
- Main Content
+
+
Main content
+ Primary button
+ Secondary button
+ Success button
+
@@ -33,7 +38,7 @@
}
-