Dependency injection in separated files of vue - vue.js

Question

I'm using Vue for my project.
Everything seems to be fine at beginning because I have knowledge about Angular before.
Now, I'm trying to implement DI in my Vue application.
I created a file named user.service.vue :
<script>
export default {
name: '$user',
provide: {
getUser: function(){
console.log('Hello world');
console.log(this.$http);
}
}
}
</script>
And I'm trying to inject the $user into my App.vue as below:
<script>
import NavigationBar from './components/shared/navigation-bar';
import UserService from './services/user.service';
export default {
components: {
NavigationBar
},
inject: ['$user'],
mounted(){
console.log(this.$user);
}
}
</script>
When I run the application, one error message shows up:
vue.runtime.esm.js?2b0e:587 [Vue warn]: Injection "$user" not found
How can I inject separated service files into my Vue app ?
Thanks,
Update 1
Even having changed my user.service.vue to :
<script>
export default {
provide: {
'$user': 'Hello world'
}
}
</script>
I still have the same problem.
But when I changed my App.vue to :
export default {
components: {
NavigationBar
},
provide: {
'$user': 'From app'
}
}
And create one component which is App's child: (Call it user-dashboard.vue for example)
export default {
name: 'user-dashboard',
inject: ['$user'],
data() {
return {
users: []
}
},
mounted() {
console.log(this.$user);
}
}
When I run the app, I get the message: From app in my console.
What I'm thinking is: the $user service must be provided by App.vue to inject to its children.
But in my application, there could me many services, such as: user.service, customer.service, ... Therefore, I cannot declare everything in my App.vue. It will be hard to maintain and fix bugs.
Any solutions please ?

Answer 1

What's wrong with using the service directly in your script?
see below:
<script>
import NavigationBar from './components/shared/navigation-bar';
import UserService from './services/user.service';
export default {
components: {
NavigationBar
},
mounted(){
UserService.someMethod().then((response) => {
console.log(response);
})
}
}
</script>