Vue 3

[IsFilimonov]

Greetings, are you considering switching to Vue 3 in the near future?

[andrewtavis]

I've gotten to a point where I'm at least getting errors shown in the TypeScript of Vue3 when I run docker-compose up --build, so I figured I'd put the steps I've taken and maybe others would like to discuss (I'm very new to Vue, and am hoping to convert this over so that I can use it for fullstack learning purposes).

Sources:

• https://www.johnpapa.net/vue2-to-vue3/ - John Papa
• https://www.vuemastery.com/blog/vue-3-migration-build/ - Vue Mastery (learn about migration)
• https://www.vuemastery.com/blog/migration/ - Vue Mastery (fixes after migration)

Steps:

1. Make sure that your project works as directed in the readme and you can run docker-compose up --build
   • You want to run docker-compose run frontend npm i instead of npm i within frontend
   • For the backend requirements.txt I found I needed to remove idna==3.1 as it was causing version conflicts.
   • You can also upgrade Django to v4.0.6 and upgrade a few packages that have security errors at this point (Pillow, ipython and urllib3)
2. Firstly, we can update some of the Docker images. The following still are support images at time of writing:
   • postgres:10-alpine -> postgres:10.21-alpine (some later versions are not working)
   • node:10-alpine -> node:14-alpine (needed as later npm versions don't run on Node 10)
   • nginx:alpine -> nginx:1.22.0-alpine
3. At this point I'd suggest committing to version control as there will be lots of automatic changes. Based on the first source, within the generated frontend directory run the following:

# In ./frontend:
vue add vue-next # switches to Vue3
vue add typescript # choose defaults to convert all JS to TS

4. To fix npm compatibility issues do the following within frontend:

npm install -g npm@latest # fixes error as seen in https://github.com/m-muhsin/celestial/issues/9
# Also of help for the above could be to run the following to reset the node modules and package-lock.json
rm -rf node_modules package-lock.json && npm install

5. At one point I was getting the error Cannot find module 'vue-template-compiler/package.json', so based on vuejs/vue-cli#2109 I ran the following in frontend:

npm i -g @vue/compiler-sfc

At this point when I run docker-compose up --build I'm getting TS errors. Again I'd be very happy to discuss or get some feedback on the above :)

[andrewtavis]

I'm considering moving to other options at the moment, but again talking about the above would be helpful.