├── template
    ├── static
    │   └── favicon.ico
    ├── assets
    │   ├── img
    │   │   └── NuxtMicro.png
    │   └── css
    │   │   └── main.css
    ├── .gitignore
    ├── api
    │   ├── users.js
    │   └── index.js
    ├── components
    │   └── Footer.vue
    ├── plugins
    │   └── axios.js
    ├── nuxt.index.js
    ├── README.md
    ├── server.js
    ├── micro.config.js
    ├── nuxt.config.js
    ├── .eslintrc.js
    ├── layouts
    │   ├── error.vue
    │   └── default.vue
    ├── package.json
    └── pages
    │   ├── index.vue
    │   └── _id.vue
├── meta.js
└── README.md


/template/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt-community/micro-template/HEAD/template/static/favicon.ico


--------------------------------------------------------------------------------
/template/assets/img/NuxtMicro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt-community/micro-template/HEAD/template/assets/img/NuxtMicro.png


--------------------------------------------------------------------------------
/template/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 


--------------------------------------------------------------------------------
/template/api/users.js:
--------------------------------------------------------------------------------
1 | module.exports = new Promise((resolve) => {
2 |   resolve([
3 |       { name: 'Alexandre' },
4 |       { name: 'Sébastien' },
5 |       { name: 'Sebastian' }
6 |     ]
7 |   )
8 | })


--------------------------------------------------------------------------------
/template/components/Footer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <footer>
3 |     Visit our website for more documentation : <a href="https://nuxtjs.org" target="_blank">nuxtjs.org</a>
4 |   </footer>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/template/plugins/axios.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | let options = {}
 4 | // The server-side needs a full url to works
 5 | if (process.server) {
 6 |   options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
 7 | }
 8 | 
 9 | export default axios.create(options)
10 | 


--------------------------------------------------------------------------------
/template/nuxt.index.js:
--------------------------------------------------------------------------------
 1 | // Require Nuxt And Builder modules
 2 | const { Nuxt, Builder } = require('nuxt')
 3 | 
 4 | // Require nuxt config
 5 | const config = require('./nuxt.config.js')
 6 | 
 7 | // Create a new nuxt instance
 8 | const nuxt = new Nuxt(config)
 9 | 
10 | // Enable live build & reloading on dev
11 | if (nuxt.options.dev) {
12 |   new Builder(nuxt).build()
13 | }
14 | 
15 | module.exports = nuxt
16 | 


--------------------------------------------------------------------------------
/template/api/index.js:
--------------------------------------------------------------------------------
 1 | const users = require('./users.js')
 2 | const { createError } = require('micro')
 3 | 
 4 | exports.getUser = async (id) => {
 5 |   let allUsers = await users
 6 |   if(id  >= 0 && id < allUsers.length) {
 7 |     let user = allUsers[id]
 8 |     return user
 9 |   }
10 |   throw createError(404, 'User not found')
11 | }
12 | 
13 | exports.getUsers = async () => {
14 |   return await users
15 | }
16 | 


--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
 1 | # nm2
 2 | 
 3 | > Nuxt.js + Δ micro project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | $ npm install # Or yarn
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ npm run dev # Or yarn dev
13 | 
14 | # build for production and launch server
15 | $ npm start # Or yarn start
16 | 
17 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
18 | 


--------------------------------------------------------------------------------
/template/server.js:
--------------------------------------------------------------------------------
 1 | const micro = require('micro')
 2 | 
 3 | const host = process.env.HOST || 'localhost'
 4 | const port = process.env.PORT || 3000
 5 | 
 6 | // setup the microservice includinng intercepted routing
 7 | const serviceConfig = require('./micro.config.js')
 8 | const server = micro(serviceConfig)
 9 | 
10 | // Listen the server
11 | server.listen(port, host)
12 | console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
13 | 


--------------------------------------------------------------------------------
/template/micro.config.js:
--------------------------------------------------------------------------------
 1 | const dispatch = require('micro-route/dispatch')
 2 | const {send} = require('micro')
 3 | const {getUser, getUsers} = require('./api/')
 4 | const nuxt = require('./nuxt.index.js')
 5 | 
 6 | module.exports = dispatch()
 7 |   .dispatch('/api/users/:id', ['GET'], async (req, res, {params, query}) => send(res, 200, await getUser(params.id)))
 8 |   .dispatch('/api/users', ['GET'], async (req, res) => send(res, 200, await getUsers()))
 9 |   .dispatch('*', ['GET'], (req, res) => nuxt.render(req, res))
10 | 


--------------------------------------------------------------------------------
/template/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | html, body
 2 | {
 3 |   background-color: #fff;
 4 |   color: #000;
 5 |   letter-spacing: 0.5px;
 6 |   font-family: "Source Sans Pro", Arial, sans-serif;
 7 |   height: 100vh;
 8 |   margin: 0;
 9 | }
10 | 
11 | footer
12 | {
13 |   padding: 20px;
14 |   text-align: center;
15 |   border-top: 1px solid #ddd;
16 | }
17 | 
18 | a, a:hover, a:focus, a:visited
19 | {
20 |   color: #000;
21 | }
22 | 
23 | .logo {
24 |   width: 100%;
25 |   height: auto;
26 |   max-width: 400px;
27 |   max-height: 289px;
28 | }
29 | 


--------------------------------------------------------------------------------
/template/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'Nuxt Micro Project',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', meta: 'description', content: 'Nuxt.js project' }
11 |     ],
12 |     link: [
13 |       { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }
14 |     ]
15 |   },
16 |   /*
17 |   ** Global CSS
18 |   */
19 |   css: ['~assets/css/main.css'],
20 |   /*
21 |   ** Add axios globally
22 |   */
23 |   build: {
24 |     vendor: ['axios']
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/template/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   env: {
 5 |     browser: true,
 6 |     node: true
 7 |   },
 8 |   extends: 'standard',
 9 |   // required to lint *.vue files
10 |   plugins: [
11 |     'html'
12 |   ],
13 |   // add your custom rules here
14 |   rules: {
15 |     // allow paren-less arrow functions
16 |     'arrow-parens': 0,
17 |     // allow async-await
18 |     'generator-star-spacing': 0,
19 |     // allow debugger during development
20 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
21 |     // do not allow console.logs etc...
22 |     'no-console': 2
23 |   },
24 |   globals: {}
25 | }
26 | 


--------------------------------------------------------------------------------
/meta.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   helpers: {
 3 |     raw: function(options) {
 4 |       return options.fn(this)
 5 |     }
 6 |   },
 7 |   prompts: {
 8 |     name: {
 9 |       'type': 'string',
10 |       'required': true,
11 |       'message': 'Project name'
12 |     },
13 |     description: {
14 |       'type': 'string',
15 |       'required': false,
16 |       'message': 'Project description',
17 |       'default': 'Nuxt.js + Δ micro project'
18 |     },
19 |     author: {
20 |       'type': 'string',
21 |       'message': 'Author'
22 |     },
23 |   },
24 |   completeMessage: '{{#inPlace}}To get started:\n\n  npm install # Or yarn\n  npm run dev # Or yarn dev{{else}}To get started:\n\n  cd {{destDirName}}\n  npm install # Or yarn\n  npm run dev # Or yarn dev{{/inPlace}}'
25 | };
26 | 


--------------------------------------------------------------------------------
/template/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | {{{{raw}}}}
 2 | <template>
 3 |   <section class="container">
 4 |     <img src="~assets/img/NuxtMicro.png" alt="NuxtMicro.js Logo" class="logo" />
 5 |     <h1 class="title">
 6 |       {{ error.statusCode }}
 7 |     </h1>
 8 |     <h2 class="info">
 9 |       {{ error.message }}
10 |     </h2>
11 |     <nuxt-link class="button" to="/" v-if="error.statusCode === 404">
12 |       Homepage
13 |     </nuxt-link>
14 |   </section>
15 | </template>
16 | {{{{/raw}}}}
17 | <script>
18 | export default {
19 |   props: ['error']
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | .title
25 | {
26 |   margin-top: 15px;
27 |   font-size: 5em;
28 | }
29 | .info
30 | {
31 |   font-weight: 300;
32 |   color: #9aabb1;
33 |   margin: 0;
34 | }
35 | .button
36 | {
37 |   margin-top: 50px;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/template/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt/>
 4 |     <my-footer/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import MyFooter from '~/components/Footer.vue'
10 | 
11 | export default {
12 |   components: {
13 |     MyFooter
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | .container
20 | {
21 |   margin: 0;
22 |   width: 100%;
23 |   padding: 100px 0;
24 |   text-align: center;
25 | }
26 | 
27 | .button, .button:visited
28 | {
29 |   display: inline-block;
30 |   color: black;
31 |   letter-spacing: 1px;
32 |   background-color: #fff;
33 |   border: 2px solid #000;
34 |   text-decoration: none;
35 |   text-transform: uppercase;
36 |   padding: 15px 45px;
37 | }
38 | 
39 | .button:hover, .button:focus
40 | {
41 |   color: #fff;
42 |   background-color: #000;
43 | }
44 | 
45 | .title
46 | {
47 |   color: #000;
48 |   font-weight: 300;
49 |   font-size: 2.5em;
50 |   margin: 0;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "{{ name }}",
 3 |   "version": "0.0.0",
 4 |   "description": "{{ description }}",
 5 |   "author": "{{ author }}",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node server.js",
 9 |     "build": "nuxt build",
10 |     "start": "NODE_ENV=production node server.js",
11 |     "precommit": "npm run lint",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
13 |   },
14 |   "dependencies": {
15 |     "axios": "^0.19.x",
16 |     "micro": "^9.3.4",
17 |     "micro-route": "^2.5.0",
18 |     "nuxt": "^2.10.2"
19 |   },
20 |   "devDependencies": {
21 |     "babel-eslint": "^10.0.3",
22 |     "eslint": "^4.12.1",
23 |     "eslint-config-standard": "^14.1.0",
24 |     "eslint-plugin-html": "^6.0.0",
25 |     "eslint-plugin-promise": "^4.2.1",
26 |     "eslint-plugin-standard": "^4.0.1",
27 |     "nodemon": "^1.19.4"
28 |   },
29 |   "engines": {
30 |     "node": ">8.1.x"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/template/pages/index.vue:
--------------------------------------------------------------------------------
 1 | {{{{raw}}}}
 2 | <template>
 3 |   <section class="container">
 4 |     <img src="~assets/img/NuxtMicro.png" alt="Nuxt.js Logo" class="logo" />
 5 |     <h1 class="title">
 6 |       USERS
 7 |     </h1>
 8 |     <ul class="users">
 9 |       <li v-for="(user, index) in users" class="user" :key="index">
10 |         <nuxt-link :to="{ name: 'id', params: { id: index }}" class="button">
11 |           {{ user.name }}
12 |         </nuxt-link>
13 |       </li>
14 |     </ul>
15 |   </section>
16 | </template>
17 | {{{{/raw}}}}
18 | <script>
19 | import axios from '~/plugins/axios'
20 | 
21 | export default {
22 |   data () {
23 |     return {
24 |       users: []
25 |     }
26 |   },
27 |   async asyncData () {
28 |     const {data} = await axios.get('/api/users')
29 |     return {users: data}
30 |   },
31 |   head () {
32 |     return {
33 |       title: 'Users'
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | <style scoped>
40 | .title
41 | {
42 |   margin: 30px 0;
43 | }
44 | .users
45 | {
46 |   list-style: none;
47 |   margin: 0;
48 |   padding: 0;
49 | }
50 | .user
51 | {
52 |   margin: 10px 0;
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/template/pages/_id.vue:
--------------------------------------------------------------------------------
 1 | {{{{raw}}}}
 2 | <template>
 3 |   <section class="container">
 4 |     <img src="~assets/img/NuxtMicro.png" alt="Nuxt.js Logo" class="logo" />
 5 |     <h1 class="title">
 6 |       User
 7 |     </h1>
 8 |     <h2 class="info">
 9 |       {{ user.name }}
10 |     </h2>
11 |     <nuxt-link class="button" to="/">
12 |       Users
13 |     </nuxt-link>
14 |   </section>
15 | </template>
16 | {{{{/raw}}}}
17 | <script>
18 | import axios from '~/plugins/axios'
19 | 
20 | export default {
21 |   name: 'id',
22 |   data () {
23 |     return {
24 |       user: {}
25 |     }
26 |   },
27 |   async asyncData (context) {
28 |     try {
29 |       const { data } = await axios.get('/api/users/' + context.params.id)
30 |       return { user: data }
31 |     } catch (e) {
32 |       context.error({ statusCode: e.response.status, message: e.response.data })
33 |     }
34 |   },
35 |   head () {
36 |     return {
37 |       title: `User: ${this.user.name}`
38 |     }
39 |   }
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | .title
45 | {
46 |   margin-top: 30px;
47 | }
48 | .info
49 | {
50 |   font-weight: 300;
51 |   color: #9aabb1;
52 |   margin: 0;
53 |   margin-top: 10px;
54 | }
55 | .button
56 | {
57 |   margin-top: 30px;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center"><img src="https://cloud.githubusercontent.com/assets/4921147/22486717/eb75cf62-e80a-11e6-8564-09a42e374034.png"></p>
 2 | 
 3 | 
 4 | # Nuxt.js with Δ micro and a tiny bit of routing via micro-route
 5 | 
 6 | > [Δ micro](https://github.com/zeit/micro) + [micro-route](https://github.com/dotcypress/micro-route) + [Nuxt.js](https://nuxtjs.org) = :zap:
 7 | 
 8 | ## Origins
 9 | 
10 | The repo had to be detached from it's ancestor [`nuxt-express`](https://github.com/nuxt-community/express-template) to be able to add it to the [`nuxt-community`](https://github.com/nuxt-community) so basically all credit goes to them. It was just swapping `express` with `micro`. 
11 | 
12 | ## Installation
13 | 
14 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli).
15 | 
16 | ```bash
17 | npm install -g @vue/cli-init # isntall the bridge to make legacy templates work with Vue CLI 3
18 | 
19 | vue init nuxt-community/micro-template <project-name>
20 | 
21 | cd <project-name> # move to your project
22 | 
23 | npm install # or yarn install
24 | ```
25 | 
26 | > Make sure to use a version of vue-cli >= 2.1 (vue -V).
27 | 
28 | ## Commands
29 | 
30 | | Command | Description |
31 | |---------|-------------|
32 | | npm run dev | Start micro server in development with Nuxt.js in dev mode (hot reloading). Listen on [http://localhost:3000](http://localhost:3000). |
33 | | npm run build | Build the nuxt.js web application for production. |
34 | | npm start | Start micro server in production. |
35 | 
36 | ## Live Demo
37 | 
38 | [https://nuxt-micro.now.sh](https://nuxt-micro.now.sh)
39 | 
40 | And to see the source code visit [https://nuxt-micro.now.sh/_src](https://nuxt-micro.now.sh/_src)
41 | 
42 | ## Documentation
43 | 
44 | - [micro](https://github.com/zeit/micro)
45 | - [micro-route](https://github.com/dotcypress/micro-route/)
46 | - [Nuxt.js](https://nuxtjs.org/guide/)
47 | - [Vue.js](http://vuejs.org/guide/)
48 | 
49 | ## Licenses
50 | 
51 | - [micro license](https://github.com/zeit/micro/blob/master/LICENSE.md)
52 | - [micro-route license](https://github.com/dotcypress/micro-route/blob/master/LICENSE)
53 | - [NuxtJS license](https://github.com/nuxt/nuxt.js/blob/master/LICENSE.md)
54 | - [VueJS license](https://github.com/vuejs/vue/blob/master/LICENSE)
55 | 


--------------------------------------------------------------------------------