Nuxt

1
2

yarn add nuxt
yarn add stylus stylus-loader --dev

Lets make client directory in our project. It will contain whole frontend code made with Nuxt.
Also, create nuxt.config.js in the root folder to define Nuxt settings.
Lets define client directory and loader color:

1
2
3
4

module.exports = {
  loading: {color: '#3B8070'},
  srcDir: 'client/'
}

Lets make a single page. Create client/pages directory and index.vue file within. Then fill this file with some test data:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
    <div>
        Hello #{{ counter }}
    <button @click="counter = counter +1">+1</button>
    </div>
</template>

<script>
    export default {
      data () {
        return {
          counter: 0
        }
      }
    }
</script>

<style lang="stylus">
    div
        background-color lightblue
</style>

Express

Lets make an entry point: in the server directory create index.js.
Before further work we have to install some modules:

1

yarn add express

server/index.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

require('module-alias/register') // Details at Part 0/Module alias 
const express = require('express')
const app = express()

const {Nuxt, Builder} = require('nuxt')
const nuxtConfig = require('@/nuxt.config')
nuxtConfig.dev = process.env.NODE_ENV !== 'production'
const nuxt = new Nuxt(nuxtConfig)

if (nuxtConfig.dev) {
  new Builder(nuxt).build()
}

app.use(nuxt.render)

app.listen(3000, () => {
  console.log(`Application was started at the 3000th port`)
})

exports = module.exports = app

Now we should modify our package.json and set our main script to server/index.js.
That’s all. Now we can run our server with yarn run and we’ll got simple page located on http://localhost:3000.
This part wraps up 01-nuxt-express git branch.