davidroyer / nuxt-api-example

Nuxt.js API Example using Vuex and axios

Nuxt API Example

An example of using Vuex, axios, and a REST API with Nuxt

A couple things that are setup for this example that could be of interest to someone...

• Nuxt's fetch() method is used to fill our Vuex Store for our posts listing page and for the dynamic post page for individual post
• The head property for the dynamic post route is using the title property from the returned post object to set the meta title property

Other project info

• Nuxt Modules are used to add Bulma, markdown-it, and font-awesome
• The menu.js file inside the middleware directory is used to handle closing the mobile dropdown menu once a link is selected
• I am using Netlify for hosting this as a static site

Build Setup

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate

For detailed explanation on how things work, checkout the Nuxt.js docs.

nuxt-api-example's Issues

[email protected] dev:

Thanks for your wonderful Nuxt API example, I am getting this error after following your instruction,

1.npm install
2. npm run dev

Nuxt Fatal Error :(
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Thank you,

asyncData no change page

how to load data on the same page using asyncData

TypeError: Cannot read property 'push' of undefined

When I run npm run dev I get the following errors:

❯ npm run dev

> [email protected] dev /home/anton/git/nuxt-api-example
> nuxt


 ERROR  Nuxt error

  TypeError: Cannot read property 'push' of undefined

and

 ERROR  Failed to compile with 3 errors                                    10:41:23

These dependencies were not found:

* ~components/Header.vue in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/home/anton/git/nuxt-api-example/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue
* ~plugins/axios.js in ./store/index.js
* ~static/markdownFiles/HomeContent.md in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/home/anton/git/nuxt-api-example/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue

To install them, you can run: npm install --save ~components/Header.vue ~plugins/axios.js ~static/markdownFiles/HomeContent.md

code

代码提交之前，自己先试试有没有问题