Vue Router and intlify Warning

[IT Master]

this is realy awesome starter for nuxt3
but I am getting Vue Router and intlify Warning
etc:

1. [Vue Router warn]: No match found for location with path "/__webpack_hmr"
2. [intlify] Not found 'banners.welcome' key in 'ko' locale messages.
   [intlify] Fall back to translate 'banners.welcome' key with 'en' locale.
   Could you have solution?

[Alfian Dwi Nugraha]

did you add a new language with code "ko" ?

[IT Master]

thanks for your response
I don't added code "ko"
I can't understand over warning in your project
only my browser language code is 'ko'

[Alfian Dwi Nugraha]

is your browser language set to "ko - korean"?

[IT Master]

yes all right
if I change language to 'en', your warning don't not appear

[Alfian Dwi Nugraha]

ah, it means that this warning appears because this template tries to find out the system language, then looks for it in the locales datashet. because the default language provided is en so they are trying to return en.

[Alfian Dwi Nugraha]

I tried to check the locales that are registered first, if there is not it will still return to "en", maybe this will get rid of the warning earlier.
you can check in this commit c1091ca

[IT Master]

yes
so what is yur solution to remove warning?

[Alfian Dwi Nugraha]

try doing a git pull to receive my latest commit update.
this commit should be c1091ca help

[IT Master]

thanks for your helps

[Alfian Dwi Nugraha]

your welcome, and i tried to add korean language too in this latest commit 84737af

I only use a direct language translator, if there are errors maybe you can contribute hahaha.

thanks!

[IT Master]

thanks @viandwi 👏👏👏
I have 3 beginer question(not issues)
I am cloning your awesome starter with nuxt3 init app

1. can't use variable in app.scss
   error: $fontFamily: undefined variable
   I think that this is sass setting problem😂
2. I already used locale files with .json but you used .yml file
   what do you prefer .json vs .yml?
3. Your Components Architecture
   // state:styles
   const styles = reactive<{[key: string]: string}>(...)
   👀 why do you use 'reactive' instead of 'ref'?
   // state
   const selectedXXX = computed(() => {...});
   👀why do you use computed?

[Alfian Dwi Nugraha]

1. u can check in this issue #13, I don't know where the error is exactly, because on my computer it runs smoothly (windows & macOS)

2. I prefer to use .yml why? because, making language translations is a very tedious thing. with .json it makes us think of tons of symbols like keys to pass (") and then some (,) to separate values, as well as nested objects that take up space.
   with yml I just need to write easily and without much attachment to writing rules.

3. why use reactive instead of ref? this is according to the documentation in vuejs, where reactive and ref are basically the same to create reactive data, the difference is that ref is used for primitive data (booleans, etc.) while reactive is for dynamic data (objects, arrays).
   reactive also has the advantage that it can be accessed directly without the need to pass .value

then computed is used to detect changes in existing props, because of my fear when props change for example you use the button component, then change the style programminly, you will find the button component does not re-render itself, therefore I use computed to make sure when props style changes, then the selectedStyle that will be applied to the class will also change and force the button component to re-render itself.

[IT Master]

Awesome Answer ✨
thanks for your detail response
My Understand

1. solution is windi.css version ( < 2.3.1)
2. good
3. reactive(sometimes not working with dynamic data)
   etc (Vue Apex Chart Library...)
   computed(detect change porps and then force rerendering with style)

My understand is right?