Cannot import components into Vue when using Flask

Question

I am currently working on a project with Flask and Vue and am trying to implement a carousel into my webpage. When following tutorials on creating a carousel, I run into issues creating and importing components for Vue.
My current file structure is

project
│   app.py  
│
└───templates
│   │   base.html
│   │   index.html
│   
└───static
│   │   main.js
│
└───components
    │   Carousel.vue
    │   CarouselSlide.vue

app.py and template are elements that are used for the Flask application; main.js and components are used for Vue. I recognize that I do not have a App.vue file inside, but I am using flask run to run my local server. I have imported Vue in my base html using

<script src="https://unpkg.com/vue@next"></script>

I get Uncaught SyntaxError: import declarations may only appear at top level of a module when I place the following text inside main.js.

import Carousel from "./components/Carousel"

Should I be building my app a different way? Or how do i resolve this error. I have tried putting the import statements in my base html using script tags but that results in
Uncaught ReferenceError: Carousel is not defined

Thank you!

Asked By: Peek0

||

Source

Answer 1

There is a useful guide on TestDriven.io to accomplish this. Here are the key take-aways:

In your app.py file:

from flask import Flask, render_template 

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html", **{"greeting": "Hello from Flask!"})

And in your templates/index.html file (only body tag showing):

<body>
    <div id="vm">
        <p>{{ greeting }}</p>
        <p>[[ greeting ]]</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- importing Vue here -->
    <script src="{{ url_for('static', filename='index.js') }}"></script>
</body>

you also need a static/index.js file (here, the Vue context is created):

const vm = new Vue({ 
    el: '#vm',
    delimiters: ['[[', ']]'],
    // add a data element here:
    data: {
            greeting: 'Hello, Vue!'
        }
})

That’s it. Your folder structure should look something like this:

├───app.py
├───static
│   └───index.js
└───templates
    └───index.html

If you run flask run now, you should get both outputs:

$ Hello from Flask!
$ Hello, Vue!

Regarding your question if you should be building your app in a different way: I think it depends on the use case. I like to run both Vue and Flask as separate projects: Vue as a client side application (SPA) and Flask as the ‘backend’ (REST API). They are connected to each other using HTTP requests.

Maybe you can consider this as well. More info here: https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/

Answered By: linus

Cannot import components into Vue when using Flask

Question:

Answers: