Code Monkey home page Code Monkey logo

flask-vue-todo's Introduction

flask-vue-todo

A todo app with Vue and backed by Flask

๐Ÿš€ Live Demo preview

The demo is deployed on Heroku's free dyno and provides an interface of register/login for the use of a small group of users.

Start frontend development server

cd frontend
# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn run dev

# build for production with minification
yarn run build

Replace yarn with npm if you are using npm. Frontend pages will be served at http://localhost:8080

Note: In this mode, the backend is not available yet, any server request will fail on the page. It is only for frontend debugging.

Start flask development server

# In the repo root, install all dependencies
pipenv install

# Init DB
pipenv run flask db upgrade

# Start development server
FLASK_ENV=development pipenv run flask run

Pages will be served at http://localhost:5000.

Note: In this mode, all pages are served by Flask, so you need to build the frontend before this step.

Deploy to Heroku

Deploy

License

This work is released under MIT License, originated by @frostming. See more details: LICENSE

flask-vue-todo's People

Contributors

frostming avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

flask-vue-todo's Issues

Move `isLoggedIn` to the store

Hi there again,

I am trying to move isLoggedIn to the store so I can use state, mutations and getters for the login.

In store/state.js:

import api from '../api'

export default {
  isLoggedIn: api.getSession() ? true : false
}

In store/mutations.js

export default {
  login(state) {
    state.authorized = true
  },
  logout(state) {
    state.authorized = false
  },
}

In store/getters.js

export default {
  authorized: state => state.authorized,
};

And on login I call this.$store.commit('login'), on logout this.$store.commit('logout')

The thing is that this.$store.getters.authorized returns always true if I refresh

Any idea how to fix it ?

Jinja2 and Vue.js delimiter

Hi there,

Very educational example app.
I am writing my own app trying to migrate my UI from Jinja2 to Vue.js and I have a question:

How does the {{ csrf_token() }} in index.html get rendered via Jinja2 and the rest of the of the double curly braces get rendered via vuejs?

In my example the token does not get rendered

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.