Nathan Wailes - Blog - GitHub - LinkedIn - Patreon - Reddit - Stack Overflow - Twitter - YouTube

Vue.js

Owned by Nathan Wailes
Last updated: Oct 09, 2023
71 min read

General links



Testing

Flask and Vue.js

  • 2017.02.05 - Quora - Is it okay to use Flask with Vue.js? If it is, is there a convention for making applications with Flask and 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

Misc links / articles / discussions



Vuex



  • https://github.com/vuejs/vuex

  • Official documentation

    • 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.

    • Getting Started

      • 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

    • Data Flow

    • Application Structure

    • Plugins

    • Strict Mode

    • Form Handling

    • Testing

    • Hot Reloading

    • API Reference

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

 

Migrating from Vuetify 2 to Vuetify 3

Guides

Online discussions

 

 

 

Follow me on Twitter