DEV Community

Johannes Lichtenberger
Johannes Lichtenberger

Posted on

5 1

Building a web frontend with Vue.js v3, Typescript and D3.js during #Hacktoberfest together

Hi all,

As I just started a web front-end for SirixDB, we can switch to Vue.js v3.

A pre-alpha has been released. So, as SirixDB is kind of at the same stage regarding v1, let's build something together with the latest stuff. I'm just learning front-end related stuff, so any help is more than appreciated and you can practise your Uve.js v3 skills from day one, basically :-)

Ah, I'm super enthusiastic and I just started using Vue a couple of days ago ;-)

Best weekend to all of you
Johannes

Top comments (7)

Collapse
 
dinsmoredesign profile image
Derek D β€’

I was pretty hesitant of the Composition API in Vue, but the more we've been practicing TDD at my job, the more excited I am to use the new Vue API. Vue Test Utils is painful to use when testing logic in many places because of the way the object syntax works. Just from a testing standpoint, it should be a lot easier to test v3 applications as we move towards a React Hooks-like API, where everything is a function.

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

Out of interest are you using Vue with typescript and tsx?

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger β€’ β€’ Edited

Yes, at least TypeScript :-) but we more or less start from scratch, so we can use whatever fits our needs best.

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger β€’

We're using Nuxt.js now :-)

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

I have a project with Vue and typescript that I have already started so I didn't see a way to migrate to nuxt, did you have to start over? If you didn't perhaps there is hope for me.

Thread Thread
 
johanneslichtenberger profile image
Johannes Lichtenberger β€’

Hmm, we basically only had a couple of days of work on the project and it was a PR from @simonholdorf

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger β€’

Seems probably not everything is implemented, yet, so using npmjs.com/package/@vue/composition... might be better.

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay