Creating a Nuxt application with Python frameworks

Introduction

Not long ago, I wrote about Creating a Nuxt application with Koa, Express, and Slim, which aims for Node.js and PHP web frameworks. If you are using Python, this is a simple experiment and the basic idea how we can create the Nuxt app with the Python web frameworks, such as Flask.

Nuxt

So, this is what I have in pages/index.vue:

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>This is Nuxt + Python.</p>
  </div>
</template>

<script>
import axios from '~/plugins/axios'

export default {
  async asyncData () {
    let {data} = await axios.get('/')
    console.log(data.data)
    return data.data
  },
  head () {
    return {
      title: 'Nuxt + Python'
    }
  }
}
</script>

<style>
h1 {
  font-size: 40px;
}

p {
  font-size: 20px;
}
</style>

And in my nuxt.config.js, I need to make sure the correct address of my Python app that axios will be calling - http://127.0.0.1:5000:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  env: {
    HOST_URL: process.env.HOST_URL || 'http://127.0.0.1:5000'
  },
  /*
  ** Global CSS
  */
  css: ['~/assets/css/main.css']
}

Python: Flask

While on the Python server side, in my app/routes.py, I have:

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "http://127.0.0.1:3000"}})

@app.route('/')
def home():
  message = {}
  data = {}

  message['message'] = 'Hello World from Flask!'
  data['status'] = 200
  data['data'] = message

  return jsonify(data)

if __name__ == '__main__':
  app.run(debug=True)

I need to make sure that only http://127.0.0.1:3000 is allowed to access the Flask app via CORS.

Running the apps

After setting up all the basic configurations above, then we are ready to run and glue them up together:

# Flask

$ cd [my-app-name]
$ cd venv
$ python app/routes.py

You can access it at http://localhost:5000/ directly and you should see the json outout on your screen:

{
  "data": {
    "message": "Hello World from Flask!"
  },
  "status": 200
}

While on the other side:

# Nuxt

# Dependencies
$ npm install

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

Access it at http://localhost:3000/. You should see a home page with Hello World message coming from http://localhost:5000/.

Conclusion

That's it and we now have Nuxt as both server and client that handle our application's view and templates while Python's just handle our server side's logic and we no longer need any template engines for presenting our content. So, once for all, perhaps we don't need to learn so many template engines and we don't need worry about the battle between them because now we have the universal one - Nuxt.

You can download the working sample from the repo in my GitHub. Any questions, issues or thoughts, just leave me a message.