Version 0.2.0

- Add README for examples vuex-store, async-data and global-css - Add examples/global-css/ - Feature: we can now use nuxt.config.js to add global css files and modules - Fix: show webpack error of compilation
nuxt · Nov 7, 2016 · 9ebbb14 · 9ebbb14
1 parent e80cf65
commit 9ebbb14
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 30 deletions.
diff --git a/examples/async-data/README.md b/examples/async-data/README.md
@@ -1,10 +1,38 @@
-## Loading async data
+# Async data with Nuxt.js
 
-To launch this example
+## data(context)
+
+> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the real component data.
+
+`data` is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route.
+
+The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, **return a Promise**, nuxt.js will wait for the promise to be resolved before rendering the Component.
+
+For example:
+```js
+export default {
+  data ({ params }) {
+    return axios.get(`http://my-api/posts/${params.id}`)
+    .then((res) => {
+      return { title: res.data.title }
+    })
+  }
+}
+```
+
+And then, you can display the data inside your template:
+
+```html
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+## Demo
 
 ```bash
-npm install # or yarn install
+npm install
 npm start
 ```
 
-Go to [http://localhost:3000](http://localhost:3000)
+Go to [http://localhost:3000](http://localhost:3000) and navigate inside the app.
diff --git a/examples/global-css/README.me b/examples/global-css/README.me
@@ -0,0 +1,45 @@
+# Global CSS with Nuxt.js
+
+> Nuxt.js let you define the CSS files/modules/libraries you want to set as globals (included in every pages).
+
+## Usage
+
+In `nuxt.config.js` file, add the CSS ressources:
+
+```js
+const { resolve } = require('path')
+
+module.exports = {
+  css: [
+    // Load a node.js module
+    'hover.css/css/hover-min.css',
+    // node.js module but we specify the lang
+    { src: 'bulma', lang: 'sass' },
+    // Css file in the project
+    // It is important to give an absolute path
+    resolve(__dirname, 'css/main.css')
+  ]
+}
+```
+
+## Demo
+
+To see the demo working:
+```bash
+npm install
+npm start
+```
+
+Go to [http://localhost:8080](http://localhost:8080) and navigate inside the app.
+
+## Production
+
+In production, they will be minified and extracted in a file named `styles.css` and added in the `<head>` of the page.
+
+To launch the demo in production mode so you can see the ``<head>` populated with the `<link>` tag:
+
+```bash
+NODE_ENV=production npm start
+```
+
+Go to [http://localhost:8080](http://localhost:8080) and check the source code.
diff --git a/examples/global-css/css/main.css b/examples/global-css/css/main.css
@@ -0,0 +1,8 @@
+body {
+  background: #eee;
+  text-align: center;
+  padding-top: 30px;
+}
+.content {
+  margin-top: 100px;
+}
diff --git a/examples/global-css/nuxt.config.js b/examples/global-css/nuxt.config.js
@@ -1,4 +1,9 @@
+const { resolve } = require('path')
+
 module.exports = {
-  // Nuxt.js configuration file
-  // Please look at https://nuxtjs.org/docs/config-file
+  css: [
+    'hover.css/css/hover-min.css',
+    { src: 'bulma', lang: 'sass' },
+    resolve(__dirname, 'css/main.css')
+  ]
 }
diff --git a/examples/global-css/package.json b/examples/global-css/package.json
@@ -2,7 +2,11 @@
   "name": "global-css",
   "description": "",
   "dependencies": {
-    "nuxt": "latest"
+    "bulma": "^0.2.3",
+    "hover.css": "^2.0.2",
+    "node-sass": "^3.11.2",
+    "nuxt": "latest",
+    "sass-loader": "^4.0.2"
   },
   "scripts": {
     "start": "nuxt"

diff --git a/examples/global-css/pages/about.vue b/examples/global-css/pages/about.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="content">
+    <h1 class="title">Another Page</h1>
+    <p><router-link to="/" class="button is-medium is-info hvr-wobble-vertical">Another button</router-link></p>
+    <p><router-link to="/">Back home</router-link></p>
+  </div>
+</template>
diff --git a/examples/global-css/pages/index.vue b/examples/global-css/pages/index.vue
@@ -1,19 +1,7 @@
 <template>
-  <p>Hello {{ name }}!</p>
+  <div class="content">
+    <h1 class="title">Custom CSS!</h1>
+    <p><router-link to="/about" class="button is-medium is-primary hvr-float-shadow">I am a button</router-link></p>
+    <p><router-link to="/about">About page</router-link></p>
+  </div>
 </template>
-
-<script>
-export default {
-  data () {
-    return { name: 'world' }
-  }
-}
-</script>
-
-<style>
-p {
-  font-size: 20px;
-  text-align: center;
-  padding: 100px;
-}
-</style>
diff --git a/examples/vuex-store/README.md b/examples/vuex-store/README.md
@@ -49,3 +49,23 @@ You're ready to use `this.$store` inside your `.vue` files :)
   <button @click="$store.commit('increment')">{{ $store.state.counter }}</button>
 </template>
 ```
+
+## fetch(context)
+
+> Used to fill the store before rendering the page
+
+The `fetch` method, *if set*, is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route.
+
+The `fetch` method receives the context as the first argument, you can use it to fetch some data and fill the store. To make the fetch method asynchronous, **return a Promise**, nuxt.js will wait for the promise to be resolved before rendering the Component.
+
+For example:
+```js
+export default {
+  fetch ({ store, params }) {
+    return axios.get('http://my-url')
+    .then((res) => {
+      store.commit('setUser', res.data)
+    })
+  }
+}
+```
diff --git a/lib/app/App.vue b/lib/app/App.vue
@@ -38,3 +38,7 @@ export default {
   }
 }
 </script>
+
+<% css.forEach(function (c) { %>
+<style src="<%= (typeof c === 'string' ? c : c.src) %>" lang="<%= (c.lang ? c.lang : 'css') %>"></style>
+<% }) %>
diff --git a/lib/app/client.js b/lib/app/client.js
@@ -100,7 +100,7 @@ function hotReloadAPI (_app) {
     const originalDataFn = (Component._data || noopData).toString().replace(/\s/g, '')
     const newDataFn = (Component._Ctor.options.data || noopData).toString().replace(/\s/g, '')
     if (originalDataFn !== newDataFn) {
-      Component._data = Component._Ctor.options.data
+      Component._data = Component._Ctor.options.data || noopData
       let p = Component._data(context)
       if (!(p instanceof Promise)) { p = Promise.resolve(p) }
       p.then((data) => {
@@ -115,7 +115,7 @@ function hotReloadAPI (_app) {
     const newFetchFn = (Component._Ctor.options.fetch || noopFetch).toString().replace(/\s/g, '')
     // Fetch has been updated, we call it to update the store
     if (originalFetchFn !== newFetchFn) {
-      Component.fetch = Component._Ctor.options.fetch
+      Component.fetch = Component._Ctor.options.fetch || noopFetch
       let p = Component.fetch(context)
       if (!(p instanceof Promise)) { p = Promise.resolve(p) }
       <%= (loading ? 'p.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %>

diff --git a/lib/build/index.js b/lib/build/index.js
@@ -81,6 +81,7 @@ module.exports = function * () {
   let templateVars = {
     isDev: this.isDev,
     store: this.options.store,
+    css: this.options.css,
     loading: (this.options.loading === 'string' ? r(this.dir, this.options.loading) : this.options.loading),
     components: {
       Loading: r(__dirname, '..', 'app', 'components', 'Loading.vue'),
@@ -201,7 +202,7 @@ function createWebpackMiddlewares () {
       colors: true,
       chunks: false
     },
-    quiet: true,
+    quiet: false,
     noInfo: true
   }))
   this.webpackHotMiddleware = pify(require('webpack-hot-middleware')(clientCompiler))
@@ -229,7 +230,7 @@ function webpackRunClient () {
     const serverCompiler = webpack(clientConfig)
     serverCompiler.run((err, stats) => {
       if (err) return reject(err)
-      debug('[webpack:build:client]\n', stats.toString({ chunks: false, colors: true }))
+      console.log('[webpack:build:client]\n', stats.toString({ chunks: false, colors: true }))
       resolve()
     })
   })
@@ -241,7 +242,7 @@ function webpackRunServer () {
     const serverCompiler = webpack(serverConfig)
     serverCompiler.run((err, stats) => {
       if (err) return reject(err)
-      debug('[webpack:build:server]\n', stats.toString({ chunks: false, colors: true }))
+      console.log('[webpack:build:server]\n', stats.toString({ chunks: false, colors: true }))
       const bundlePath = join(serverConfig.output.path, serverConfig.output.filename)
       createRenderer.call(this, fs.readFileSync(bundlePath, 'utf8'))
       resolve()

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
   "main": "index.js",
   "license": "MIT",