I am having vue application inside static JS app and in vuejs's main.js file I am having 3 lines of code:
import { createApp } from 'vue'
import componentMap from './componentMap'
createApp(componentMap['vue-home-page']).mount("#vueContainer")
App.vue:
<template>
<h1> VUE Starter Kit </h1>
</template>
<script>
export default {
name: 'App'
}
</script>
and I am getting error on second line i.e. import App from './App.vue'
where it says
Module not found: Error: path argument is not a string
componentMap.js:
import App from '.App.vue';
const componentMap = {'vue-home-page': App}
export default componentMap
vue-page.hbs:
<div id='vueContainer'><vue-home-page /></div>
Project Structure:
src
hbs-app
page
index.hbs
landing-page.hbs
vue-page.hbs
vue-app
main.js
App.vue
componentMap.js
Related
Instead of mounting my component directly to #app, I'm trying to push my component one level down so I can pass props to it from the HTML file it lives in. However, nothing shows up and there aren't any console errors. I'm sure it's just me misunderstanding how Vue 3 and createApp works.
My HTML file:
<div id="app">
<my-component />
</div>
My main JS file:
import { createApp } from 'vue'
import MyComponent from './pages/MyComponent.vue'
import { IonicVue } from '#ionic/vue'
const app = createApp({
components: {
MyComponent: {
props: {
},
}
},
})
.use(IonicVue)
.mount("#app");
Thank you in advance!
I am using Vue 3 + Vite plugin for Quasar + Pinia for Store management. I followed all official documentation (Quasar, Pinia). But I am getting this error.
[Vue warn]: injection "Symbol(pinia)" not found.
...
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function
at <ViewLogin onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
...
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
pinia.esm-browser.js:1638 Uncaught (in promise) Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.
at useStore (pinia.esm-browser.js:1638:19)
js:185:25)
main.js
import {createApp} from 'vue'
import {Notify, Quasar} from 'quasar'
// Import icon libraries
import '#quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
import '#quasar/extras/material-icons-round/material-icons-round.css'
// A few examples for animations from Animate.css:
// import #quasar/extras/animate/fadeIn.css
// import #quasar/extras/animate/fadeOut.css
// Import Quasar css
import 'quasar/src/css/index.sass'
// Import icon libraries
import '#quasar/extras/material-icons/material-icons.css'
import '#quasar/extras/material-icons-sharp/material-icons-sharp.css'
// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'
import router from "./router/router";
import i18n from "./i18n/i18n"
import {createPinia} from "pinia/dist/pinia";
import {useLoginStore} from "./stores/login";
const app = createApp(App)
// app.config.globalProperties.loginStore = useLoginStore();
app.use(Quasar, {
plugins: {
Notify,
}, // import Quasar plugins and add here
})
app.use(router)
app.use(i18n)
app.use(createPinia())
// Assumes you have a <div id="app"></div> in your router.html
app.mount('#app')
And I am recieving this error after adding 'const store = useLoginStore()' to the component's code.
<script setup>
import {ref} from 'vue'
import {storeToRefs} from 'pinia'
import {useLoginStore} from '../../stores/login'
import {useQuasar} from 'quasar'
const $q = useQuasar()
const email = ref(null)
const password = ref(null)
const store = useLoginStore()
const {loginEmail} = storeToRefs(store)
</script>
What is the problem and how to fix it?
The problem was related to WebStorm. It automatically creates this import:
import {createPinia} from "pinia/dist/pinia";
instead of this
import {createPinia} from 'pinia'
For me it was :
import { isTemplateNode } from '#vue/compiler-core'
Cut and reload the server works fine
I'm trying to import v-movable (https://github.com/thewebkid/v-movable) in a component inside my Vue app created with Vue CLI 4, but I keep getting the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Movable>
<Intro>
<App> at src/App.vue
<Root>
Currently my main.js file looks like this:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app');
And my Intro.vue component file looks like this:
<template>
<div class="intro">
<div class="guideline">
<div class="circle start-circle"></div>
<movable class="circle end-circle">
<IconSlideUp id="icon-slide-up" />
<span class="label">Slide</span>
</movable>
<div class="line"></div>
</div>
</div>
</template>
<script>
import IconSlideUp from '#/assets/icon-slide-up.svg'
import movable from 'v-movable'
export default {
name: 'Intro',
props: {
msg: String
},
components: {
IconSlideUp,
movable
},
methods: {
}
}
</script>
<style scoped lang="scss">
...
</style>
Do I need to globally register movable in my main.js? How would I go about doing that? Any help would be very much appreciated, and please do let me know if there's any other information I can/should provide.
In the project's Github demo, there is a component import, which can be done in a SFC this way:
import movable from './components/movable';
https://codesandbox.io/s/mystifying-cartwright-yvis1
You are using the plugin installation, but doing it inside of a component instead of main.js, and it's missing Vue.use. Remove the import from your component and change main.js:
main.js
import Vue from 'vue'
import App from './App.vue';
import movable from 'v-movable';
Vue.use(movable);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
When I create a script as typescript (lang="ts") I get an error stating
"Cannot find module './components/Navigation' or its corresponding type declarations (Vetur 2307).".
I realized that this only happens when I set the lang as ts, which is what I need to build my Vue application.
app.vue
<template>
<Navigation />
</template>
<script lang="ts">
import Navigation from './components/Navigation'; // This is where I get the error message
export default {
name: 'app',
components: {
Navigation,
}
}
</script>
Navigation.vue
<template>
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/categories">Categories</router-link>
<router-link to="/random">Random</router-link>
</div>
<router-view />
</template>
<script lang="ts">
export default {
name: 'Navigation',
}
</script>
In the src folder add the file shims-vue.d.ts with the following content :
Vue 2 :
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
Vue 3:
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
and import the component with its extension .vue :
import Navigation from './components/Navigation.vue';
instead of :
import Navigation from './components/Navigation';
Hello i have a problem for import a component in a exercice on vue.js.
Here is the architecture of my files
I am in the CarPage.vue and i want to import CarList.vue and CarDetails.vue.
Here is the part of code with my import:
<script>
import CarList from '../components/CarList.vue'
import CarDetails from '../components/CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
i have this error:
Failed to compile.
./src/components/pages/CarPage.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/pages/CarPage.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../components/CarDetails.vue' in 'C:\Users\rollivier\Desktop\Franck\dicolor\vue\medium\src\components\pages'
Your CarPage.vue is sitting in the same components file. So you need to import as such :
<script>
import CarList from '../CarList.vue'
import CarDetails from '../CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>