Orange Wheel: Connecting Vue and Flask Routes

For this part, I used the tutorial Full-stack single page application with Vue.js and Flask by Oleg Agapov. I chose this tutorial because:

  • Separation of frontend and backend into separate directories.
  • Sets up the project to use vue-router with Flask.
  • Sets up the config file so that when static assets are bundled, the output directory is at the root directory level. As a result, if I cd into my project, the first layer is frontend, backend, and dist. Both the frontend and backend were configured to connect to the dist directory.

Some issues I came across with the tutorial:

  • Inside the backend/app/app.py, the static_folder and template_folder path are different because I placed my app.py at a layer deeper. In the tutorial, the paths were ./dist/static and ./dist. In my case, because my app.py is inside the project directory app, I had to change it to ../../dist/static and ../../dist so it will find the output directory dist.
  • The tutorial didn’t mentioned how the Vue components were rendered in the frontend/App.vue. The answer? The magical tag of <router-view>. This tag is what vue-router us as a marker for where to render the component corresponding to the current route. Initially, I was confused since the site kept rendering the helloWorld code I put in the App.vue no matter what route I put in. Then I added the magic tag of <router-view></router-view> inside of <template> tag. Boom! The components contents now appear!

I also came across another issues that is specific to my project: testing.

Here is the error:

[Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.

Fear not. The Vue Test Utils documentation has a page just for Vue Router: Using with Vue Router. Here is my test code afterward:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Router from 'vue-router'
import App from '@/App'

const localVue = createLocalVue()
localVue.use(Router)

describe('App.vue', () => {
  it('renders Vue component App', () => {
    const wrapper = shallowMount(App, {
      localVue
    })
    expect(wrapper.isVueInstance()).toBe(true)
  })
})

Routing debugging took more than expected, so I will stop here and leave it as a separate post.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.