diff --git a/README.md b/README.md index 72e969fdc2..28d0c2ccd0 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ Support us

+ > 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 @@ } -