Very basic kickstart Bottle kit with Vue.js. Included Axios,, Babel and Webpack 2.
HTML Python JavaScript CSS
Latest commit afa247d Mar 17, 2017 @koddr committed on GitHub Update index.html
Failed to load latest commit information.
assets Init commit Mar 17, 2017
static/images Init commit Mar 17, 2017
templates Update index.html Mar 17, 2017
.gitignore Init commit Mar 17, 2017 Rename to Mar 17, 2017 Update Mar 17, 2017 Init commit Mar 17, 2017
package.json Update package.json Mar 17, 2017
requirements.txt Init commit Mar 17, 2017 Init commit Mar 17, 2017
webpack.config.js Init commit Mar 17, 2017


Very basic kickstart Bottle kit with Vue.js

GitHub release licence licence

Simplify development of reactive web applications on Bottle – lightweight WSGI micro web-framework for Python! A simple process of installing and deploying. Everything has already been done for you. Just enjoy writing your code!

What is this?

Kickstart kit included latest version of npm packs:

  • Axios (for make AJAX calls)
  • Babel (for turn ES6 code into readable vanilla)
  • Vue.js (for reactive 'em all)
  • Vue-resource (for supports the Promise API on Vue)
  • Webpack (for packing 'em all)

For visual design I use Bulma. This is a modern CSS framework based on Flexbox. Small and smart. If you haven't seen it before I promise – you'll like it!

How to install?

First, clone this git repository:

$ git clone

Second, install npm depencies and make build:

$ cd bottle-vue-kickstart
$ npm install && npm run build

Third, prepare your virtual environment:

$ python3 -m venv venv
$ source venv/bin/activate

Next, install Bottle and all extensions:

(venv) $ pip install bottle bottle-sqlalchemy jinja2
(venv) $ deactivate

Finally, run development server:

$ python

Bottle v0.12.13 server starting up (using AutoServer())...
Listening on http://localhost:8080/
Hit Ctrl-C to quit.

If you did everything right...

Result without database

(Optional) Install database with example objects:

$ python

Now, your yellow section on http://localhost:8080/ will look like this:

Result with database

And we done!

Final app structure

├── assets
│   ├── js
│   │   ├── _bootstrap.js
│   │   └── index.js
│   └── sass
│       ├── _variables.scss
│       └── index.scss
├── static
│   ├── css
│   │   └── app.min.css
│   ├── images
│   │   └── bottle-vue-kickstart-logo-horizontal.svg
│   └── js
│       └── app.min.js
├── templates
│   ├── index.html
│   └── layout
│       └── base.html
├── articles.db
├── package.json
├── requirements.txt
└── webpack.config.js

What's next? Build something awesome and make web beautiful again!


Development and maintenance of Bottle Vue kickstart kit project engaged by Vikky Shostak (Koddr). If you want to write a «thank you» or ask something, use this e-mail.

Your help

If you want help, we will be glad reviews about Bottle Vue kickstart kit on personal blogs (including Twitter), online media and/or specialized IT-portals. Thank you!


The MIT License (MIT)