Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-31 15:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Version 0.2.0

Browse Source 
- 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
This commit is contained in:
Sébastien Chopin 2016-11-07 23:26:53 +01:00
parent e80cf65d21
commit 9ebbb14eab
12 changed files with 140 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
examples/async-data/README.md
View File

@ -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.

45
examples/global-css/README.me Normal file
View File

@ -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.

8
examples/global-css/css/main.css Normal file
View File

@ -0,0 +1,8 @@
body {
background: #eee;
text-align: center;
padding-top: 30px;
}
.content {
margin-top: 100px;
}

9
examples/global-css/nuxt.config.js
View File

@ -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')
]
}

6
examples/global-css/package.json
View File

@ -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"

7
examples/global-css/pages/about.vue Normal file
View File

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

22
examples/global-css/pages/index.vue
View File

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

20
examples/vuex-store/README.md
View File

@ -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)
})
}
}
```

4
lib/app/App.vue
View File

@ -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>
<% }) %>

4
lib/app/client.js
View File

@ -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))' : '') %>

7
lib/build/index.js
View File

@ -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()

2
package.json
View File

@ -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",