All Projects → davidroyer → Nuxt Api Example

davidroyer / Nuxt Api Example

Nuxt.js API Example using Vuex and axios

Projects that are alternatives of or similar to Nuxt Api Example

Intro To Vue
Workshop Materials for my Introduction to Vue.js Workshop
Stars: ✭ 2,668 (+2161.02%)
Mutual labels:  nuxt, vuex
Nuxt Firebase Sns Example
Nuxt v2 & Firebase(Hosting / Functions SSR / Firestore), Google Auth SNS Example.
Stars: ✭ 485 (+311.02%)
Mutual labels:  nuxt, vuex
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (+88.98%)
Mutual labels:  nuxt, vuex
Vue Org Chart
Manage and publish your interactive organization chart (orgchart), 100% free and no install required: just copy a folder to any location
Stars: ✭ 207 (+75.42%)
Mutual labels:  nuxt, vuex
Nuxt Ssr Demo
✨ 高仿掘金,整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router),一个基于 Nuxt 的服务器端渲染 Demo
Stars: ✭ 856 (+625.42%)
Mutual labels:  nuxt, vuex
Buefy Shop
A sample shop built with Nuxt, Stripe, Firebase and Serverless Functions
Stars: ✭ 207 (+75.42%)
Mutual labels:  nuxt, vuex
Nuxt Elm
基于nuxt2+vue构建的全栈开源项目
Stars: ✭ 304 (+157.63%)
Mutual labels:  nuxt, vuex
Vue People
VuePeople lists and connects Vue.JS developers around the world.
Stars: ✭ 167 (+41.53%)
Mutual labels:  nuxt, vuex
Hackernews
HackerNews clone built with Nuxt.js
Stars: ✭ 758 (+542.37%)
Mutual labels:  nuxt, vuex
Vuecnodejs
⚽️🎉Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org ) 预览(DEMO):
Stars: ✭ 705 (+497.46%)
Mutual labels:  nuxt, vuex
Typed Vuex
🏦 A typed store accessor for vanilla Vuex.
Stars: ✭ 193 (+63.56%)
Mutual labels:  nuxt, vuex
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-54.24%)
Mutual labels:  nuxt, vuex
Vue Cheatsheet
Modified version of the official VueMastery cheatsheet
Stars: ✭ 188 (+59.32%)
Mutual labels:  nuxt, vuex
Nuxt Juejin Project
仿掘金web网站,使用服务端渲染。主要技术:nuxt + koa + vuex + axios + element-ui 。
Stars: ✭ 209 (+77.12%)
Mutual labels:  nuxt, vuex
Vue Gates
🔒 A Vue.js & Nuxt.js plugin that allows you to use roles and permissions in your components or DOM elements, also compatible as middleware and methods.
Stars: ✭ 184 (+55.93%)
Mutual labels:  nuxt, vuex
Vue Kindergarten
Modular security for Vue, Vuex, Vue-Router and Nuxt
Stars: ✭ 303 (+156.78%)
Mutual labels:  nuxt, vuex
Vue Soundcloud
🎧 A SoundCloud client built with Vue and Nuxt
Stars: ✭ 141 (+19.49%)
Mutual labels:  nuxt, vuex
Vue Stator
Vuex alternative based on Vue.observable()
Stars: ✭ 162 (+37.29%)
Mutual labels:  nuxt, vuex
Nuepress
📖 Nuxt.js + WordPress REST API
Stars: ✭ 524 (+344.07%)
Mutual labels:  nuxt, vuex
Nuxt.js
The Intuitive Vue(2) Framework
Stars: ✭ 38,986 (+32938.98%)
Mutual labels:  nuxt, vuex

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].