Using the latest version of Vue
I've been trying to make Vuelidate work
Every guide I see on the internet using this type of "Main.js" code:
import Vue from 'vue';
import Vuelidate from 'vuelidate';
import App from './app/App';
Vue.use(Vuelidate);
new Vue({
el: '#app',
render: h => h(App)
});
While my main.js looks like this:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Trying to use in my component as followed:
import { required, email } from '#vuelidate/validators'
import {useVuelidate} from "#vuelidate/core";
export default {
data: () => ({
v$: useVuelidate(),
Trying to implement it like this:
<div v-if="submitted && !$v.validations.affiliate.required"></div>
Getting this error:
unable to resolve type of v$
import { createApp } from 'vue'
import App from './App.vue'
import Vuelidate from 'vuelidate'
createApp(App).use(Vuelidate).mount('#app')
Related
I am developing an application in Express and Vue js
I'm getting this:
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=460a75c2' does not provide an export named 'Vue' (at main.js?t=1667997788986:1:9)
App.vue file :
import {Vue, createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import axios from 'axios'
import vueAxios from 'vue-axios'
Vue.use(axios, vueAxios)
createApp(App).mount('#app')
My main.js file is :
<script>
export default {
data(){
return{
dataResponse: [],
}
},
methods: {
async getDataResponse(){
const res = await axios.get(`${this.baseUrl}/catalog/home`)
console.log(response)
}
},
created(){
this.getDataResponse()
}
}
</script>
<template>
<h1>Welcome</h1>
</template>
You didn't write which version of Vue you are using, but based on the fact that you are using createApp it looks like you are using Vue 3.
In that case, the error is correct -- there is no export called Vue in the module vue. Vue 3 removed the default export, so you can't write import Vue from 'vue' anymore, and there is no export named Vue in the package, so import { Vue } from 'vue' is not valid either.
You're probably trying to follow an old tutorial about installing Vue plugins. In Vue 3, instead of writing Vue.use(plugin), you would write createApp().use(plugin) instead.
If your are using Vue 2.7 and 3.x, do you mind if try import { createApp } from 'vue', and then use createApp(App).use(axios).use(vueAxios).mount('#app')? It should be works because of import nature.
Another alternative:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import axios from 'axios'
import vueAxios from 'vue-axios'
const app = createApp(App)
app.use(axios)
app.use(vueAxios)
app.mount('#app')
I am using vue 2.6.14 and composition-api 1.3.3 package to use composition api. I have
my main.js like
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
I try to setup a store
I have a src folder / store folder / index.js
and inside the index.js
import { reactive } from '#vue/composition-api'
const state = reactive({
counter : 0
})
export default{ state }
inside App.vue I try to import store to use it
<script>
import store from '#/store'
</script>
I get the error Uncaught Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
I tried all solutions from here and nothing works. If I remove the import store from '#/store' the error goes away. Using vue 3 s not an option.
How can I solve this?
Thanks
imports are automatically hoisted to the top of the file, so it actually precedes the Vue.use(VueCompositionApi) at runtime.
So these lines:
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
import App from './App.vue' 👈 hoisted
...become:
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
import App from './App.vue' 👈
Vue.use(VueCompositionAPI)
So the plugin doesn't get installed before App.vue gets imported, leading to the error you observed.
Option 1: Move plugin installation to own file
You can move the installation of #vue/composition-api into its own file that could be imported before App.vue:
// lib/composition-api.js
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
// main.js
import Vue from 'vue'
import './lib/composition-api'
import App from 'App.vue'
demo 1
Option 2: Use require() in App.vue
require the store in the component's setup(), where the #vue/composition-api would've already been installed:
// App.vue
import { defineComponent, computed } from '#vue/composition-api'
export default defineComponent({
setup() {
const store = require('#/store').default
return {
counter: computed(() => store.state.counter),
increment: () => store.state.counter++,
}
},
})
demo 2
Option 3: Use import() in App.vue
Dynamically import the store with import(). This is especially needed in Vite, which does not have require().
// App.vue
import { defineComponent, computed, ref } from '#vue/composition-api'
export default defineComponent({
setup() {
const store = ref()
import('#/store').then(mod => store.value = mod.default)
return {
counter: computed(() => store.value?.state.counter),
increment: () => store.value && store.value.state.counter++,
}
},
})
demo 3
Hi everyone I am using Aos libray in my Vue 3 project
import App from './App.vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { createApp } from "vue";
const app = createApp({
render: (h) => h(App),
created(){
AOS.init()
}
});
app.mount('#app')
And add
<div data-aos="fade-up">#MY codes block<div>
But project not working What is the problem ?? Thanks ..
I had the same problem
My solution was:
import AOS from 'aos'
import 'aos/dist/aos.css'
createApp(App)
.use(AOS.init())
.mount("#app");
You should try this :
import App from './App.vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { createApp } from "vue";
export const app = createApp(App)
app.AOS = new AOS.init({ disable: "phone" });
app.use(AOS).mount('#app')
I am using vue-form-generator and trying to get it to render a simple form without success. I am going to re-use this generator in dozens of files as my application is form heavy and would like to make this global and I'll just manage everything in components.
main.js file
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";
Vue.use("VueFormGenerator", VueFormGenerator);
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
I have a larger template that uses this template for most of the page, this is the template file where I am trying to use VueFormGenerator
NewTrade.vue
<template>
<div>
<p class="introText">Please try to stick to your strategy and use the Manual mode as little as possible if at all! </p>
<form action="#">
<VueFormGenerator
:schema="schema"
:model="model"
/>
</form>
</div>
</template>
<script>
export default {
data() {
return {
model: {
name: "David Johnson"
},
schema: {
fields: [
{
name: "text"
}
]
}
}
}
}
</script>
This is the error I get in Chrome.
[Vue warn]: Unknown custom element: <VueFormGenerator> - did you register
the component correctly? For recursive components, make sure to provide the
"name" option.
found in
---> <NewTrade> at src/components/NewTrade.vue
<Trading> at src/components/Trading.vue
<App> at src/App.vue
<Root>
just use component instead of use
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";
Vue.component("VueFormGenerator ", VueFormGenerator); // <-- component instead of use
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Usually you'd use vue-form-generator instead of VueFormGenerator as the component name here and in template, as that's the convention, but you only need that when you compile run-time.
here is a working example: https://codesandbox.io/s/o77lmqq9v6
I have included plugins and their css files in main.js :-
import Vue from 'vue'
import App from './App'
import router from './router'
import 'moment'
import 'jquery'
import 'bootstrap'
import BootstrapDatePicker from 'vue-bootstrap-datetimepicker'
import vueMultiSelect from 'vue-multiselect'
import VueFormGenerator from 'vue-form-generator'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'vue-multiselect/dist/vue-multiselect.min.css'
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css'
import 'vue-form-generator/dist/vfg.css'
Vue.config.productionTip = false
Vue.use({vueMultiSelect, VueFormGenerator})
Vue.component(BootstrapDatePicker)
Vue.component('multiselect', vueMultiSelect.default)
Vue.component('vue-form-generator', VueFormGenerator.component)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
But I dunno if this is right way to do so.
As, when i am trying to use jQuery or other variable in some component, I have to import them again
If you want to import and use a library in Vue without having to redeclare use the Vue prototype:
Vue.prototype.$moment = require('moment')
Then inside of your Component:
method: {
action () {
let date = this.$moment()
}
}
You can read more about Instance Properties here:
https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html