Nathan Wailes - Blog - GitHub - LinkedIn - Patreon - Reddit - Stack Overflow - Twitter - YouTube
Vue.js
General links
Twitter - Evan You (creator of Vue.js)
GitHub - Awesome Vue (links to good stuff)
The Main Components of Vue
Vue - The core repository.
Vuex - A Flux-inspired Application Architecture for Vue.js.
Vue-router - A routing system for SPAs with Vue.js.
Vue-resource - A plugin, which provides services for making web requests and to handle responses using XMLHttpRequests or JSONP.
Testing
2017.02.08 - Edd Yerburgh - How to unit test Vue components for beginners
2017.07.13 - Scotch.io - How to Write A Unit Test for Vue.js
2017.11.20 - Bruno Teixeira - Unit testing with Vue — Approach, tips, and tricks — Part 1
Flask and Vue.js
Vue/Flask Template: Template for a Vue.js frontend with a flask backend
Vue-Flask: Quick web Dashboard / REST API
Flue: Webapp skeleton with flask & vue
Vue News Board: A Full-Stack Web App built with Vue.js and Flask
Flask-Vue: Flask extension about Vue.js
2017.03.23 - Reddit - Pros and Cons of Flask and Vue.js?
The strength of using them together is the same strength as using them separately: use as much as you need without bothering with anything else.
You can create a programmatically simple RESTful API with Flask, either explicitly or using a library to map to your models. The API is easily consumed by Vue making HTTP calls and parsing the result.
That's all you may need: Flask to "map" database models to a RESTful API and Vue to consume it. If you are retuning data that doesn't map to a database, then you don't even need to include a library to do that - just add a route to Flask and return JSON. Consume with Vue via axios or VueResource.With Vue.js in particular the backend is totally irrelevant because Vue.js doesn't even know what HTTP is. It's completely up to the developer to add that which I think is a very good design decision.
In other words: you do not want the server-side framework and the client-side framework to be a "good match" because that most likely means that they are very opinionated and thus probably not easily replaceable.[The ORM] is up to you, flask works well with any ORM.
The most popular is probably SQLAlchemy. peewee or PonyORM also seem great but I don't have any experience with them.I just deployed a fairly complex SPA using Flask as a REST API and Vue.js for the front-end.
Don't have anything specific to share. It's a nice combo and it's been a joy to work with both, really.
If you have any questions feel free to ask and I'll try to help you out.There's not really any cons. having deployed a few SPAs with Vue and Flask, the one thing I really like is how well presented the Vue docs are.
Don't really have any advice other than reading the Vue docs (since they're really great), but just wanted to say that Flask and Vue is an excellent combination.
It gives you a simple, but flexible architecture on both sides of the stack (frontend/backend). If you need any resources for an example of Flask and Vue working together then feel free to PM.The biggest con, which is only a con if you editorially prefer Python to JavaScript, is that when you write a SPA, you're moving a lot of logic onto the client, which is JavaScript. (...) You're also using Vue's templates, which IMHO, are a bit less convenient than Jinja2. So that big move of logic from server to client means that much of Flask's cool integrations are more or less obsolete. Take message flashing. Generally instead of generating a message on the server, you're going to pass a static to the client through a JSON API and the client flashes the message. Or, take logging in. Instead of something like flask-login, you probably want flask-JWT. Flask sort of moves, in an SPA, from being an application server to being just a data translation and business logic layer.
How to do misc common tasks necessary when using Vue.js with Flask
How to get started with combining Vue.js and Flask
How to mix Vue.js tags {{ }} with Jinja template tags {{ }}
2016.12.11 - StackOverflow - How to render by Vue instead of Jinja
Summary: there are at least three ways:
You can set up Jinja to use different delimiters. ← My preferred method.
You can set up Vue.js to use different delimiters.
You can use the {% raw %} syntax to tell Jinja that the stuff contained in that tag should not be treated as Jinja-template code.
How to pass an array from Flask to Vue.js
Here's the code I came up with (this is a variable in my 'data' section in my Vue.js code):
movieTitles: %% all_movie_titles|safe %%,
You need the
|safe
part to keep Jinja from HTML-encoding the quotation marks (i.e. changing"
to something like"
)
Tutorials
2015.05.21 - Laracasts - Learning Vue.js 0.12
Matt and Naveed said this wasn't worth watching; it's too different from the current version of Vue.
2015.10 - Laracasts - Learning Vue 1.0: Step By Step
He shows a 'Hello World' example that demonstrates two-way binding.
2016.08.24 - Takuya Tejima - How to Build SPA with Vue Router 2.0
Undated
Udemy - Vue JS 2 - The Complete Guide (incl. Vuex)
If you're using single-file templates / components that are being compiled with webpack, you can use camel-case for the actual tag names. If you're not compiling it (i.e. you just have a Vue component in a Flask template), you're restricted to what the DOM allows, and it does not allow case-sensitive tag names.
rec'd by Naveed
Misc links / articles / discussions
Vuex
What is Vuex? - Vuex is an application architecture for centralized state management in Vue.js applications.
If you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better structure things outside of your Vue components. This is where Vuex comes into play.
When using Vue.js alone, we often tend to store the state "inside" our components. That is, each component owns a piece of our application state, and as a result the state is scattered all over the place. However, sometimes a piece of state needs to be shared by multiple components. A commonly-seen practice is letting one component "send" some state to other components using the custom event system. The problem with this pattern is that the event flow inside large component trees can quickly become complex, and it's often difficult to reason about when something goes wrong.
At the center of every Vuex application is the store. A "store" is basically a container that holds your application state. There are two things that makes a Vuex store different from a plain global object:
Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes.
You cannot directly mutate the store's state. The only way to change a store's state is by explicitly dispatching mutations. This makes every state change easily track-able, and enables tooling that helps us better understand our applications.
Tutorial - We are using this simple example to explain the concepts, and the problems Vuex aims to solve - how to manage a large app which uses several components.
Core Concepts
Lessons learned
Vue
You get a very unhelpful error message if you accidentally leave a v-model="" (set to nothing).
The 'name' in the template file is what's used in the Vue Chrome extension.
Vuex
If you modify the state directly, without using commit() or dispatch(), the Vuex chrome extension won't know about the change and will show the previous value.
If you switch a mutation to accept multiple arguments and thus change its function definition to have a dict, you then must update all existing calls to that mutation to also use a dict to pass in arguments, even if you're only passing in one argument.
Example of how to do it correctly:
When only one argument can be passed into the mutation:
Mutation:
personaName: (state, personaName) => {
state.personaName = personaName
},
Committing the mutation in some component as part of a computed property:
personaName: {
get () { return this.$store.getters.personaName },
set: function (personaName) {
this.$store.commit('personaName', personaName)
}
}
When two arguments can be passed into the mutation, but only one argument actually is passed in when you commit the mutation in a particular place in the code:
Mutation:
personaName: (state, {personaName, unsavedChanges = true}) => {
state.personaName = personaName
state.unsavedChanges = unsavedChanges
},
Committing the mutation in some component as part of a computed property:
personaName: {
get () { return this.$store.getters.personaName },
set: function (personaName) {
this.$store.commit('personaName', {personaName: personaName})
}
}
When I didn't do this, I was seeing my changes to that computed property (it was an input field value) getting overwritten back to what they were before.
Migrating from Vue 2 to Vue 3
Guides
Online discussions
https://www.reddit.com/r/vuejs/comments/11aae6y/how_should_i_upgrade/
“Change as little as possible while you upgrade to latest. Do the optional stuff like TypeScript or Composition API later. Trying to do it all at once is usually a disaster, in my experience.”
“Before starting migration you'll probably want to check each vuetify components you're using vs which components support vue 3. There are a LOT still missing (like the data table).”
“The Vue documentation has a great migration guide that is a good jumping off point.”
“Move to v2.7 (has the V3 API). Refactor components to V3 API as needed. When you’re ready move to V3.”
“go for the @vue-comp first and follow the guide. It should tell you what stuff you'll need to change in your code to migrate.”
Migrating from Vuetify 2 to Vuetify 3
Guides
https://vuetifyjs.com/en/getting-started/upgrade-guide/ - Upgrade Guide
Online discussions
https://www.reddit.com/r/vuetifyjs/comments/126zkzb/vuevuetify_2_to_vuevuetify_3_migration_is/
This is a great discussion (very helpful).
What he did:
I started by migrating to Vite from Webpack
Next was Vue 2 to Vue 3
Then it was time for Vuetify
I installed eslint-vuetify to help me.