The autocompletion feature of VSCode works perfectly fine with local registration of Vue components, like so:
<template>
<base-button />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import BaseButton from '#/components/base/BaseButton.vue';
#Component({
components: { BaseButton }
})
export default class MyComponent extends Vue {}
</script>
Then, for example, with my base-button which has the props extraClass, id, and type, VSCode shows me all of them properly:
But when I register my base components globally in main.ts, like so:
import Vue from 'vue';
import App from './App.vue';
import BaseButton from '#/components/base/BaseButton.vue';
Vue.component('BaseButton', BaseButton);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount('#app');
Vue still works as expected but VSCode now won't show me any autocompletions for those components.
How can I change that?
How can I enable VSCode to show me the autocompletion for the props of my self-written components when I register them globally?
Related
I'm trying to migrate from vuetify 2.6 to 2.7 because of composition-api but I'm getting a lot of errors when trying to get properties of the Vue instance, for example I'm using vue with Vuetify and I have a separed "helper" to try to get the $vuetify instance but everytime I'm getting undefined even when I'm trying to get the property from a setup() in the App.vue I get undefined, same thing happened when trying to get the $route property of vue-router from the instance with getCurrentInstance() then only solution I had with the router was using an internal composable of vue-router/composables to get the route.
Another thing that also happens is that the getCurrentInstance() sometimes returns null.
My main.js looks like:
import Vue from 'vue'
...
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
...
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount('#app')
./plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({
preset
...
})
App.vue
<template>...</template>
<script>
import { getCurrentInstance } from 'vue'
export default{
setup(){
console.log( getCurrentInstance().proxy, getCurrentInstance().proxy.$vuetify )
// returns: {}, undefined
// sometimes returns null, undefined
}
}
</script>
versions:
"vue": "^2.7.11"
"#vue/cli-service": "~5.0.8"
"vuetify": "^2.6.11"
Anyone knows what it could be?, Thanks.
Edited: Can't reproduce in vue v2.7.12. I tried vue v2.7.11 and can reproduce your issue. There is a severe regression in v2.7.11, please upgrade your vue.
Here is a minimal example of v2.7.12.
https://stackblitz.com/edit/vitejs-vite-fjpdck
getCurrentInstance().proxy does return a VueComponent and getCurrentInstance().proxy.$vuetify gets the vuetify instance successfully.
By the way, the recommended way to get $route instance in setup is
import { useRoute } from 'vue-router/composables' // need vue-router v3.6
export default{
setup(){
const route = useRoute()
}
}
I'm trying to get the value of user prop as in the blade file when the App component is mounted but I get undefined in the console. I was wondering if something changed in Vue 3 because it worked in Vue 2.
How can I get the value of the user prop?
laravel.blade file
#extends('layouts.app')
#section('content')
<App
#if(auth()->check())
:user="1"
#endif>
</App>
#endsection
App.vue
<template>
<div> {{user}} </div>
</template>
<script>
export default {
name: 'App',
props: [ 'user'],
mounted(){
console.log(this.user)
}
}
</script>
app.js
import { createApp } from 'vue';
import App from './components/App'
import router from './router';
require('./bootstrap');
const app = createApp(App)
app.use(router).mount("#app")
From the migration docs:
The propsData option has been removed. If you need to pass props to the root component instance during its creation, you should use the second argument of createApp
const app = createApp(
{
props: ['username'],
template: '<div>{{ username }}</div>'
},
{ username: 'Evan' }
)
It's not as convenient as the Vue 2 way, and I haven't found a good work-around of sending data from your Laravel controller directly to your Vue component. Best bet may be to get the info by querying your API in the created() method in Vue.
I export a component with a command.
vue-cli-service build --target wc-async --name foo 'src/components/*.vue'
In the documentation, it is very clear that the component will depend on an import from Vue.js in the main application.
I have a Vue.js application with TypeScript, how can I export my Vue instance globally to the component?
Component:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>footer</p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
#Component
export default class Footer extends Vue {
#Prop() private msg!: string;
}
</script>
Note: Vue-cli was used to create the main application.
I have written some JS classes that I would like to import in the app.js/main.js file of my vue.js project so that I can instantiate them in the components. Right now I am having to import the same JS class in all the components where I need the class individually.
I've tried the import in the main.js file but the components don't recognize it.
in the main.js file, I am importing like as follows
import Permissions from './Permissions'
However, when I want to instantiate the Permissions class in my component like
data() {
permissions: new Permission({
some object properties...
})
}
the component doesn't know what Permissions is.
How do I let the component know what Permissions class is?
To do it in the vue way, you can create your own plugin or mixin. See detailed instructions here
So, you can create a permissions plugin in permissions-plugin.js
import Permissions from './Permissions'
const PermissionsPlugin = {
install(Vue, options) {
// This adds the $getPermissions method to all instances
Vue.prototype.$getPermissions = function(properties) {
return new Permission({
some object properties...
})
}
}
};
Then you have to tell vue to use your plugin:
import Vue from 'vue'
import PermissionsPlugin from './permissions-plugin.js'
import App from './App.vue'
// The plugin is loaded here.
Vue.use(PermissionsPlugin)
new Vue({
el: '#app',
render: h => h(App)
});
And lastly now from any component you should be able to use your function like:
this.$getPermissions(properties)
I'm using Vue.js with the vue-cli. I chose for the webpack setup.
I wired up the main.js file for routing, though I can't find a way to globally register my components.
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Companies from './components/pages/Companies'
import Income from './components/pages/Income'
import Login from './components/pages/Login'
Vue.use(VueRouter)
let router = new VueRouter()
router.map({
'/companies': {
component: Companies
},
'/income': {
component: Income
},
'login': {
component: Login
}
})
router.start(App, 'body')
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import {Auth} from './lib/api'
import Loader from './components/Loader'
export default {
components: {
Loader
},
ready () {
Auth.isLoggedIn().then(
(response) => {
if (response.data === false) {
this.$router.go('/login')
} else {
this.$router.go('/companies')
}
},
(response) => {
this.$router.go('/login')
}
)
}
}
</script>
When I use my Loader component in some view, I get the following warning.
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I provided the name in the component and it didn't make any difference. I'm using the loader-component in the login-view.
I found out that I should either define the component in the component that I'm going to use it or globally. Though, I can't find out how to define it globally with the routing.
The way you have it set up now, The loader component is only locally available in the template of the App component.
Routing has no influence on global component registration, just do it like without a router:
// main.js, before all the router stuff:
import Loader from './components/Loader'
Vue.component('loader', Loader)
or register it locally in your Login component. As you already did it in App.vue, you know what to do with Loader.vue