Anybody interested in having this awesome project support Vue3? I can create a PR for that.

And many thanks @mjhea0 for writing the great tutorial for this project 👏🏻

On the GitHub page, under "About" it says: "Single Page App with Flask and Vue.js". But it should be "Single Page App with FastAPI and Vue.js".

I just cloned and docker-compose up the project. The "Hello world!" works, but when I want to register or login, I get this output on FastAPI machine:

  File "/app/./src/routes/users.py", line 27, in create_user
    return await crud.create_user(user)
  File "/app/./src/crud/users.py", line 17, in create_user
    user_obj = await Users.create(**user.dict(exclude_unset=False))
  File "/usr/local/lib/python3.9/site-packages/tortoise/models.py", line 1105, in create
    await instance.save(using_db=db, force_create=True)
  File "/usr/local/lib/python3.9/site-packages/tortoise/models.py", line 926, in save
    await executor.execute_insert(self)
  File "/usr/local/lib/python3.9/site-packages/tortoise/backends/base/executor.py", line 203, in execute_insert
    insert_result = await self.db.execute_insert(self.insert_query, values)
  File "/usr/local/lib/python3.9/site-packages/tortoise/backends/asyncpg/client.py", line 38, in translate_exceptions_
    raise OperationalError(exc)
tortoise.exceptions.OperationalError: relation "users" does not exist

@mjhea0 Tried to fix this by refering to multiple resources. Can you please look into it?

1. Cloned the repo,
2. Build the images and spin up the containers, using: $ docker-compose up -d --build
3. Applying migrations it failed to connect with database with below traceback: $ docker-compose exec backend aerich upgrade

Traceback (most recent call last):
  File "/usr/local/bin/aerich", line 8, in <module>
    sys.exit(main())
  File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 321, in main
    cli()
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1656, in invoke
    super().invoke(ctx)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1395, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/decorators.py", line 26, in new_func
    return f(get_current_context(), *args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 45, in wrapper
    loop.run_until_complete(f(*args, **kwargs))
  File "/usr/local/lib/python3.9/asyncio/base_events.py", line 642, in run_until_complete
    return future.result()
  File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 95, in cli
    await Migrate.init(tortoise_config, app, location)
  File "/usr/local/lib/python3.9/site-packages/aerich/migrate.py", line 66, in init
    await Tortoise.init(config=config)
  File "/usr/local/lib/python3.9/site-packages/tortoise/__init__.py", line 600, in init
    await cls._init_connections(connections_config, _create_db)
  File "/usr/local/lib/python3.9/site-packages/tortoise/__init__.py", line 392, in _init_connections
    await connection.create_connection(with_db=True)
  File "/usr/local/lib/python3.9/site-packages/tortoise/backends/asyncpg/client.py", line 106, in create_connection
    raise DBConnectionError(f"Can't establish connection to database {self.database}")
tortoise.exceptions.DBConnectionError: Can't establish connection to database hello_fastapi_dev

Detailed traceback:

https://github.com/testdrivenio/fastapi-vue/blob/master/services/backend/src/database/models.py#L22

Currently: return f"{self.title}, {self.author_id} on {self.created_at}"

However, the attribute author_id does not exist.

Perhaps it should be this instead?

return f"{self.title}, {self.author}, {self.id} on {self.created_at}"

• Bump python reqs version
• Remove deprecated vuex-persistedstate
• Upgrade Vue 2 to Vue 3
• Replace aerich.ini with pyproject.toml
• Update npm libs versions

This change adds support for Vue.js v3 and upgrades all other dependencies to their latest version as well. Some things to note:

• I didn't changed any styling or appearance. Should look exactly the same as before.
• I kept the options API of Vue for convenience. But if this PR is merged, shouldn't be a problem to convert to Composition API if needed
• I tested the frontend on my site and it works. For some reasons I wasn't able to test together with the FastAPI backend. So when reviewing this PR, please test the frontend AND the backend thoroughly
• The package babel-eslint is now @babel/eslint-parser
• The package vuex-persistedstate isn't maintained anymore, so I removed it without replacement. If you want its functionality, please implement an alternative.
• The package vue-template-compiler isn't needed anymore with Vue3.

So I hope this is useful for all who find this project as helpful as me.

Implements #3

I followed the tutorial and reviewed it: https://testdriven.io/blog/developing-a-single-page-app-with-fastapi-and-vuejs/ found some typo in the router in index.js. its missing in the guide.

  {
    path: '/editnote/:id',
    name: 'EditNote',
    component: EditNote,
    meta: {requiresAuth: true},
    props: true,
  }

but it still doesnt fix for me, still cant see notes. but if I clone the repo and start it, I can see the notes.

one thing to make git clone work is editing the services/frontend/Dockerfile: FROM node:16-alpine maybe it help someone

Hi, many thanks for the hard work and the post associated! It helped me a lot learn about those frameworks :)

However, from a complete fresh start (aka, the first time I build the whole app), it seems I need to run the docker-compose up -d --build twice to get the uvicorn server up. If I only run the docker-compose command once only the frontend is responding to localhost. But when I run the docker-compose a second time, I can get the backend on the port 5000.

I find this weird, considering I tried to connect to the backend container after the first docker-compose command and check if uvicorn was running with the top command in the detached terminal, and I indeed found a uvicorn process running, but the server was not responding on port 5000 until I rerun the docker-compose command.

Any idea why? Is it an issue from my side? Don't know why would it be but still asking..

Thanks!

Without change state isLoggedIn=false we can see and have access to all NavBar options (like Dashboard, Profile). This patch disable access to Dashboard and Profile after click logOut on frontend.

This will initialize the model relationships with register.py and fix the issue below. This will cleanup main.py

Issue referenced: https://stackoverflow.com/questions/65531387/tortoise-orm-for-python-no-returns-relations-of-entities-pyndantic-fastapi