Comments (13)
@orblazer Did you add vue-i18n
in your types
of tsconfig.json
?
from typescript.
@kevinmarrec Yes but this is beacause nuxt-i18n add i18 with app.i18n and the context reference is Vue instance.
from typescript.
@orblazer Alright but in which case do you need app.i18n
over app.$i18n
?
And app.$t
should arleady work.
from typescript.
That is needed if you want use the i18n in middleware (like for get locale or some variables)
from typescript.
Isn't context.app.$i18n.locale
enough ? Can you provide your middleware or a part of it to see what you're trying to achieve ?
from typescript.
@kevinmarrec i don't have the code under my hand but this is doesn't work beacause the app is not fully initialized. try to log context.app and you can see only "i18n" and not "$i18n".
from typescript.
I know a bit of nuxt-i18n
code so can chime in. nuxt-i18n
indeed exposes i18n
property (and some others) on context.app
. The $i18n
(with $
prefix) property is added to Vue instance by the i18n
plugin itself (so not by the nuxt-i18n
module) and so that one is not exposed on context
or context.app
. So to summarise, it uses either i18n
or $i18n
depending on the context. Both point to the same object though.
It's IMO a mess and if it would be for me, I would create new major version with this stuff cleaned up -- probably by only exposing $i18n
property using inject
function.
But in any case, in current state of things at least, is it not fixable in nuxt-i18n
module itself rather than here?
Some more info here nuxt-modules/i18n#282
from typescript.
OK, I think I understand. context.app
is defined as Vue
so it's not possible to extend app
without also extending Vue instance inside of components. And with messy way things are done in nuxt-i18n
, those don't match.
So I guess defining app
in nuxt as type that extends Vue
would probably help with this issue.
from typescript.
Yes exactly @rchl
from typescript.
@rchl @orblazer app
from context
already has Vue
type : https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/types/index.d.ts#L17
Are you talking about having a dedicated interface extending Vue
so that this interface can be altered by modules like nuxt-i18n
?
I'm pretty lost with all this stuff, I'm not mastering how vue-i18n
is built, there is indeed confusion between i18n
& $i18n
.
$i18n
refers to vue-i18n
plugin, meanwhile i18n
refers to the Nuxt module configuration, if I'm right.
I'm not really sure if adding properties to app
is good practices, maybe some clean up with major version could be helpful, as suggested @rchl .
But anyway, this thread should be IMO on dedicated nuxt-i18n
module.
/cc @paulgv
from typescript.
@kevinmarrec this is not only for nuxt-i18n this is for all module whant add context app methods.
Only an interface extends of Vue is probably required.
from typescript.
Are you talking about having a dedicated interface extending Vue so that this interface can be altered by modules like nuxt-i18n ?
Yes. The pros are:
- simple change
- backwards compatible (hopefully)
- makes it easy to fix types in current version of
nuxt-i18n
I'm not really sure if adding properties to app is good practices
Nothing really wrong with it. Official documentation has many examples with extending app and inject
function also does that automatically. https://nuxtjs.org/guide/plugins#inject-in-root-amp-context
$i18n refers to vue-i18n plugin, meanwhile i18n refers to the Nuxt module configuration, if I'm right.
Both refer to vue-i18n
plugin instance (extended with nuxt-i18n
properties) AFAIK but former is only exposed as a mixin and latter is only exposed on context.app
. (Or something close to that ;))
But anyway, this thread should be IMO on dedicated nuxt-i18n module.
That's true if decision is not to do dedicated interface in Nuxt. Fixing nuxt-i18n
mess and just exposing $i18n
universally (using nuxt's inject
function) has pro of having nicer API in nuxt-i18n
but:
- is not backwards compatible
- is quite a bit of work to clean up everything
- not sure if @paulgv wants to take that leap
from typescript.
I did some investigation on what context.app
really is, and came up with conclusion that it's not really a Vue
instance. Created #26 for that.
from typescript.
Related Issues (20)
- Missing types for loadNuxt HOT 3
- TS Support for Nuxt 2 fate HOT 2
- Edit tsconfig.json file path HOT 3
- Class API Support HOT 1
- an error occurred while building a nuxtJs website
- ts-loader dependency error in typescript example. HOT 1
- @nuxt/cli or @nuxt/cli-edge not listed as dependencies of @nuxt/typescript-runtime
- TS2339: Property 'DisplayNames' does not exist on type 'typeof Intl'. HOT 1
- How to use addTemplate API by typescript HOT 1
- Plugin: `$axios` undefined when destructuring Context HOT 4
- @nuxt/typescript-build cannot check types for literal strings HOT 2
- TS errors are ignored and hidden by default HOT 1
- Outdated typescript dependency HOT 6
- How to debug RangeError: Maximum call stack size exceeded at getApparentType HOT 5
- Examples on typescript.nuxtjs.org does not work
- Cannot read properties of undefined (reading 'options') HOT 2
- vscode ****.json file Point out error: "Expected an assignment or function call and instead saw an expression" HOT 2
- I got TS error, but nuxt is not breaking the build HOT 10
- @nuxt/typescript-build‘s dependencies with [email protected] is too low HOT 1
- Cannot find module '@nuxt/cli-edge' HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from typescript.