This tutorial answers the question, "How do I integrate Vue.js with Flask?" Since you are reading this tutorial, I assume that you know that Flask ...
For further actions, you may consider blocking this person and/or reporting abuse
This is my application structure, and every time i try to access the routes with blueprints i get this error:
return self.view_functionsrule.endpoint
TypeError: get() missing 1 required positional argument: 'self'
The routes are in this format :
api.add_resource(TrayResource, '/tray', '/trays')
api.add_resource(RackResource, '/rack', '/racks')
Should i add the blueprints and register them in the init file ad well?
Hello,
Do you mind sharing the code in
TrayResource
orRackResource
?from flask import current_app, request, Blueprint, render_template
from flask_jwt_extended import jwt_required
from flask_restful import Api, fields, marshal, reqparse
from api.models.database import BaseModel
from api.models.tray import Tray
from api.resources.base_resource import BaseResource
from api.utils import format_and_lower_str, log_create, log_duplicate, log_update, log_delete, non_empty_string, \
has_required_request_params
tray_bp = Blueprint('tray_bp', 'tray_page', template_folder='templates')
class TrayResource(BaseResource):
fields = {
'number': fields.Integer,
'rack.number': fields.Integer,
'code': fields.String
}
Are you using
Flask-Restful
orFlask-Restplus
?Flask-restful
If you are using
Flask-Restful
then you don't need to use blueprints. Also, remove this@tray_bp.route('/tray')
line from your resource methods. For further questions, I'd suggest asking your question here or posting the question on stackoverflow.Thanks
Nice work!
I was attempting to deploy the Flask API (no Vue.js for now) based on the Flask part of this tutorial, but I'm having some issues. I'm rather new with Flask :(.
I activate my virtualenv, but when running 'flask run' I keep getting the same error:
Error: While importing "wsgi", an ImportError was raised:
Traceback (most recent call last):
File "/home/ubuntu/.virtualenvs/scraphat_env/lib/python3.6/site-packages/flask/cli.py", line 235, in locate_app
import(module_name)
File "/home/ubuntu/Documents/scraphat_api/wsgi.py", line 11, in
from app import create_app
File "/home/ubuntu/Documents/scraphat_api/app/init.py", line 4, in
from .factory import Factory
File "/home/ubuntu/Documents/scraphat_api/app/factory.py", line 8, in
from .config import config
ModuleNotFoundError: No module named 'app.config'
I've also tried yo serve the Flask app with gunicorn, and get the same error.
Is there something I'm missing? I'm sure that there must be something I'm not doing right.
Any help would be appreciated.
Hello. Thanks for the feedback :)
Can you confirm and check if the file
config.py
is present?Thank you very much for the quick response.
The file is indeed present. Next, I show my project directory structure.
.
├── app
│ ├── config.py
│ ├── factory.py
│ ├── init.py
│ ├── models
│ │ ├── base.py
│ │ ├── database.py
│ │ ├── datastore.py
│ │ └── init.py
│ ├── resources
│ │ ├── health.py
│ │ ├── init.py
│ │ └── measures.py
│ └── utils.py
├── pytest.ini
├── README.md
├── requirements.txt
├── settings.py
├── tests
│ ├── conftest.py
│ ├── init.py
│ ├── test_app.py
│ ├── test_models.py
│ ├── test_resources.py
│ └── utils.py
├── unit-tests.sh
└── wsgi.py
Thanks for all the help.
What do you get when you run
python wsgi.py
?If I do:
. workon project_env
. cd /path/to/project/root
. python wsgi.py
I get the following:
Traceback (most recent call last):
File "wsgi.py", line 11, in
from app import create_app
File "/home/ubuntu/Documents/scraphat_api/app/init.py", line 4, in
from .factory import Factory
File "/home/ubuntu/Documents/scraphat_api/app/factory.py", line 8, in
from .config import config
ModuleNotFoundError: No module named 'app.config'
Thank you for the feedback
If I understood correctly this tutorial shows how you use flask and python when the whole index.html is a vue element. I would like to integrate flask and vue and use vue only for a few divs on my page!
I have been able to get some vue functionality by using
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
and defining some vue stuff directly in my script tags in the same html file. I would however like to be able to use Single File Components.vue
files which doesn't work for my approach. I imagine I need to usevue create vueproject
in my main directory but after that I'm clueless.Do you have any ideas how to be able to implement vue with full functionality with flask and only embed the vue components in a few divs on my page?
It's the same approach. Here's an example of snippets from index.html and main.js
index.html:
main.js:
Remember to build your
vue
files otherwise it won't work.Michael,
Thanks for the great tutorial. I followed your instructions and here are a few notes.
When using the versions below:
Centos 7
node --version
v12.14.1
npm -version
6.13.4
Below are some things I did to get this working
1 - Install postgres and postgres dev before running pip install -r requirements.txt
sudo yum install postgresql-server postgresql-contrib
2 - near the end of your instructions in vue.config.js I removed the line, " baseUrl: '', "
I had the following error before removing the line:
ERROR Invalid options in vue.config.js: "baseUrl" is not allowed
Thanks,
Greg
Hello, thanks for the info. Let me update the tutorial.
Kazi poa owefu! Good stuff!
Nice work!
And what is the advantage of this method? Right now Flask is just serving Vue files.
What is the difference between serving Vue with Flask and with npm?
Flask can be used to create APIs which can be consumed by the Vue app. In a situation where you are not using flask, you would have to implement the API in a different framework, say ExpressJs and do integrations from there.
Thanks for the answer, but still not clear the advantages of this way.
Say you have a Flask with API and a Vue frontend. In your case if Flask fails for some reason, there wouldn’t be a way to inform the user that something is wrong, because Vue is served by Flask too and the end user wouldn’t see the client app.
I suggest to divide both front and backend on the server level. So if Flask fails, you’ll still have the ability to inform the end user that the client app has lost connection with the server.
This method is not meant to replace the conventional two-tier design where you have a web app running on it on server and an API on it's own server. I actually always use the two tier approach for major projects. It's easier to manage and maintain. I only use this method for small and hobby projects. Think of vue as a replacement for bootstrap and jquery in a web application.
It's not integration. It's joke.
Great Tutorial. I also want to know about flask integrated with vue and webpack that provides live reloading feature when change made on template files.(js, html or vue)
Thanks!
To use live reloading just run
yarn serve or npm run serve
. Every change will trigger a live reload. However, you will have to runyarn build or npm run build
to integrate vue files with the flask ap[.