diff --git a/examples/async-data/README.md b/examples/async-data/README.md index 05ae22f9d..e2f4bd15b 100644 --- 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 + +``` + +## 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 new file mode 100644 index 000000000..a7d576b35 --- /dev/null +++ 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 `` of the page. + +To launch the demo in production mode so you can see the ``` populated with the `` 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 new file mode 100644 index 000000000..048db7b30 --- /dev/null +++ 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 index 116f5b776..15a9c10b9 100644 --- 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 index 8ba15a697..731fdcbd5 100644 --- 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 new file mode 100644 index 000000000..f3a7b471a --- /dev/null +++ b/examples/global-css/pages/about.vue @@ -0,0 +1,7 @@ + diff --git a/examples/global-css/pages/index.vue b/examples/global-css/pages/index.vue index 01af87da7..df0eaa2a0 100644 --- a/examples/global-css/pages/index.vue +++ b/examples/global-css/pages/index.vue @@ -1,19 +1,7 @@ - - - - diff --git a/examples/vuex-store/README.md b/examples/vuex-store/README.md index 22d5d7daa..14144a331 100644 --- 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 :) ``` + +## 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 index e6ab7531d..ce4f28c44 100644 --- a/lib/app/App.vue +++ b/lib/app/App.vue @@ -38,3 +38,7 @@ export default { } } + +<% css.forEach(function (c) { %> + +<% }) %> diff --git a/lib/app/client.js b/lib/app/client.js index 83b89a7c5..9eeb8bb32 100644 --- 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 index e39a61202..d4eff360b 100644 --- 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 index e57fd7341..3a5d48cc2 100644 --- 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",