So I have a custom Vue plugin I created. It's working, but I'm getting the warning "Unresolved function or method .." when hovering over the method call, and there's no auto-complete in WebStorm 2022.1.1. Is there a way to fix the warning? Allow auto-complete?
My plugin catId.js:
export default {
install (Vue, router) {
Vue.prototype.$hasCatId = () => {
return typeof router.currentRoute.params.id !== 'undefined' &&
router.currentRoute.params.id.length > 0
}
}
}
Then in my main.js :
import Vue from 'vue'
import catId from './plugins/catId'
import router from './router'
Vue.use(catId, router)
new Vue({
vue,
catId,
router,
render: h => h(App)
}).$mount('#app')
Then in my component:
<template>
<div v-if="$hasCatId()">
yup, has catId
</div>
</template>
Like I said, all that works in browser, but in WebStorm, I get that warning.
Any help is appreciated. It's a little hard of a sell to the team to just 'live with that warning forever'. (and having auto-complete would be nice when I/they forget what it's called and need to use it somewhere)
Related
I want to be able to use the AOS library globally on my vue project.
This is for Vue 2.
new Vue({
created () {
AOS.init()
},
render: h => h(App),
}).$mount('#app');
The Vue 3 sets up the app a little bit different.
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
I dont have that created option with the Vue 3 setup. I tried this, but it´s more of a guessing game...
createApp({App, AOS.init()})
But do I make this work in Vue 3?
You can still do that in Vue 3. Note h() is now imported as a global function from vue instead of being an argument of render().
Here's the equivalent Vue 3 code:
import { createApp, h } from 'vue'
import App from './App.vue'
createApp({
created() {
AOS.init()
},
render: () => h(App),
}).mount('#app')
You could use the created hook of the root component. To me that has always seemed like an appropriate place to initialize application-wide libraries.
I've trying to solve this problem for the last 2 hours and can't find the solution. I created a new project with Vue cli and installed Vuetify with npm.
My files are like this
App.vue
<template>
<v-app id="app">
<HelloWorld/>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld
},
data: () => ({
//
}),
};
</script>
main.js
import Vue from 'vue'
import Vuetify from './plugins/vuetify';
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(Vuetify);
new Vue({
render: h => h(App)
}).$mount('#app')
HelloWorld.vue
<template>
<v-tabs>
<v-tab>Item One</v-tab>
<v-tab>Item Two</v-tab>
<v-tab>Item Three</v-tab>
</v-tabs>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
The error I get is:
**[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> at components/HelloWorld.vue
at App.vue
**
I also tried to use any component directly in the vue.app and get the same problem. Before posting here I lookup to at least 10 different posts, and I read that I should call vuetify before the new Vue but that didn't solve the problem. I dont know if there is something missing or I just cant see the problem.
Thanks for reading my post
I suspect the problem is with <v-tabs>. I'm not very familiar with vuetify. Shouldn't this component be imported and registered (like any other component would be?).
EDIT
Oh I think you need to pass Vuetify
new Vue({
Vuetify,
}).$mount('#app')
They have a getting started doc here:
https://vuetifyjs.com/en/getting-started/quick-start
Try to setup your project in the same way.
try to follow the quick start documentation in Vuetify.
import vuetify from '#/plugins/vuetify'
new Vue({
vuetify,
}).$mount('#app')
your import path is '#/plugins/vuetify' instead of './plugins/vuetify'
and add the vuetify into your Vue({ }).$mount('#app') as shown above.
Hope it help
I'm trying to create a custom component for some repetitive html. But the component won't show and I get this error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Child>
<VApp>
<App> at src/App.vue
<Root>
My main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
Vue.component('child', {
props: ['text'],
template: `<div>{{ text }}<div>`
});
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
My App.vue:
<template>
<v-app>
<child :text="message"></child>
<Navbar/>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
</v-app>
</template>
<script>
import styles from './app.css'
import Navbar from '#/components/Navbar'
import Footer from '#/components/Footer'
export default {
name: 'App',
components: { Navbar, Footer },
computed: {
theme(){
return (this.$vuetify.theme.dark) ? 'dark' : 'light'
},
},
data: () => ({
//
}),
};
</script>
What is going on? How to define a custom component?
My question "has mostly code"; so, my thoughts on vue.js: I notice that there are quite a few different ways or styles to build vue.js applications. I wish their examples would give more context on where to put the example code, I'm a seasoned developer, but new to web dev and js, and find that a lack of examples on the vue.js site really makes it hard to learn this framework.
Try this:
1- create a component in a separate .vue file
2- register it globally in main.js
3- then call it in any component directly.
1.
<template><div>{{ text }}<div></template>
<script>
export default{
props:['text']
},
</script>
2. in main.js
//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...
3 Now you can call it in any component because it is registered globally.
<template>
<div>
<child-component text='some text to pass as prop.'/>
//...
</div>
</template>
//...
When I add:
Vue.use(VeeValidate);
My Vue page shows up blank with the console error:
TypeError: plugin is undefined
I found the following with the same error:
Vue plugin vee-validate not installing properly
but I am not utilizing the => syntax anywhere in my .vue document.
vee-validate 3.0.3, Vue 2.6.10
Full main.js file:
import Vue from 'vue'
import VeeValidate from 'vee-validate';
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(VeeValidate);
new Vue({
render: h => h(App),
}).$mount('#app')
In my App.vue file I do include ValidationProvider as a component:
<script>
import CriteriaDataModel from './data-model/criteria-data-model.js';
import UserDataModel from './data-model/user-data-model.js';
import { ValidationProvider } from 'vee-validate';
export default {
name: 'app',
data: function() {
return {
criteriaModel: CriteriaDataModel,
completeMessage: null,
form: {
user: UserDataModel
}
};
},
components: {
ValidationProvider
}
};
</script>
I also tried changing my Vue initialization to this without it helping:
new Vue({
render: function (h) { return h(App) },
}).$mount('#app')
I observed that VeeValidate has many usages of the '=>' syntax (referenced in the other stack overflow as being the problem) in the node_module, but since the intention is to use it for Vue, I question whether that is the problem.
I figured this out. The default export for vee-validate seems to be null. It worked after I changed the import to:
import * as VeeValidate from 'vee-validate';
I created two Vuejs project.
The 1st one main.js looks like this:
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
The second one looks like this:
import Vue from "vue";
import App from "./App";
import router from "./router";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>"
});
please someone explain me the difference between this codes espacially the the new vue instance creation in two differnt ways?
For The 1st one main.js:
First you must understand all the render:
The render: h => h(App) is shorthand for:
render: function (createElement) {
return createElement(App);
}
Which can be shortened to:
render: (createElement) => {
return createElement(App);
}
Which can again be shortened to (with h being an alias to createElement as noted above):
render: (h) => {
return h(App);
}
Which is then shortened further to (using ES6 "fat arrow" syntax):
render: h => h(App);
The H, It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
And the $mount allows you to explicitly mount the Vue instance when you need to. This means that you can delay the mounting of your vue instance until a particular element exists in your page or some async process has finished, which can be particularly useful when adding vue to legacy apps which inject elements into the DOM, I've also used this frequently in testing when I've wanted to use the same vue instance across multiple tests:
// Create the vue instance but don't mount it
const vm = new Vue({
template: '<div>I\'m mounted</div>',
created(){
console.log('Created');
},
mounted(){
console.log('Mounted');
}
});
// Some async task that creates a new element on the page which we can mount our instance to.
setTimeout(() => {
// Inject Div into DOM
var div = document.createElement('div');
div.id = 'async-div';
document.body.appendChild(div);
vm.$mount('#async-div');
},1000)
For The second one, I strongly recommend you to look over the current Vue documentation:
https://v2.vuejs.org/v2/guide/instance.html
Having all of your template code in an App.vue (and none in your index.html’s #app div) allows us to use the runtime-only version of Vue which is smaller than the full version.
but lets break it up:
el: '#app', will look in your index.html file for a div <div id="app"></div>;
the router, will allow you to use globally the router;
components: { App }, import your App.vue, and all component you have imported there, generally you put in this file people often put: side bar components, headers components, navigable stuff;
4.template: "<App/>", will create a div in you HTML with the id="app" only after it import you App.vue components imported there or HTML created in this file, all the content from you files will be wrapped by this div. People often use <router-view> to load the router pages components.
This second instance have the purpose of Having a cleaner index.html and having all the stuff in the App.vue