I get the following error when trying to import ForgotPassword.vue inside Login.vue. Tooltip.vue can be imported with no error though? Can't figure out what I'm doing differently. I have had similar problems before. Sometimes I get this error randomly (it works on and off):
[Vue warn]: Unknown custom element: <forgot-password> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Login> at src/components/register/Login.vue
<Register> at src/views/Register.vue
<App> at src/App.vue
<Root>
Login.vue:
<template>
<div id="login">
<tooltip />
<forgot-password />
</div>
</template>
import {
Tooltip,
ForgotPassword
} from '#/components'
export default {
components: {
Tooltip,
ForgotPassword
}
}
ForgotPassword.vue (not using props name but have tried that too. Didn't need it for other similar components that work):
<template>
<div id="forgot-password">
ouch..
</div>
</template>
components/index.js (for grouped imports):
import Tooltip from './Tooltip.vue'
import ForgotPassword from './ForgotPassword.vue'
export {
Tooltip,
ForgotPassword
}
You're exporting ForgetPassword and importing ForgotPassword. Change one of them
Related
I'm using the official highcharts-vue extension in my vue-3 project, and I have it working with the basic charts like line and area, but I'm having trouble getting a heatmap chart to work. This chart differs in that it needs to be included as an imported module, which is where I suspect my problem lies.
This is what I'm doing in the parent component:
<!-- Parent.vue -->
<template>
<HeatmapChart />
</template>
<script setup>
import HeatmapChart from 'src/components/charts/HeatmapChart.vue'
</script>
... and this is what's in the child HeatmapChart.vue file:
<!-- HeatmapChart.vue -->
<template>
<Highcharts :options="chartOptions" />
</template>
<script setup>
import Highcharts from 'highcharts'
import HeatMap from 'highcharts/modules/heatmap'
HeatMap(Highcharts)
const chartOptions = {
chart: {
type: 'heatmap',
...
}
...
}
</script>
Trying the above code doesn't render anything - the only feedback I get is the following console warning:
[Vue warn]: Component is missing template or render function.
at <Anonymous options=
I'm really not sure what's wrong, especially since I have other types of charts working. I'd sure appreciate any help I can get.
Here is an official heatmap demo for Highcharts Vue Wrapper you can base on:
https://codesandbox.io/s/vue-template-8z2f5
I'm trying to use VuePlyr in Nuxt 2. Right now I have it working as a plugin /plugins/vue-plyr.js,
import Vue from 'vue'
import VuePlyr from '#skjnldsv/vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'
Vue.use(VuePlyr)
but it is just used in one page, so I would like to remove it from the main bundle and just import it locally when used. I've tried this in my page (the template part was working when using the plugin).
<template>
<client-only>
<vue-plyr>
<div data-plyr-provider="vimeo" :data-plyr-embed-id="id" />
</vue-plyr>
</client-only>
</template>
<script>
import 'vue-plyr/dist/vue-plyr.css'
import Vue from 'vue'
export default {
async mounted () {
const VuePlyr = await import('#skjnldsv/vue-plyr')
Vue.use(VuePlyr)
}
}
</script>
but unfortunately, I'm getting this error
[Vue warn]: Unknown custom element: <vue-plyr> - did you register the component correctly?
Any idea how I could achieve this? Related with How to make a dynamic import in Nuxt?
You could import it like that
export default {
components: {
[process.client && 'VuePlyr']: () => import('#skjnldsv/vue-plyr'),
}
}
As mentioned in a previous answer.
In your nuxt config define the plugin as client only:
plugins: [
{ src: "~/plugins/vue-plyr.js", mode: "client" }
],
Then also make sure there's a client-only tag around the use of the component:
<template>
<client-only>
<vue-plyr>
<div data-plyr-provider="vimeo" :data-plyr-embed-id="id" />
</vue-plyr>
</client-only>
</template>
Edit: importing the component again in the mounted method isn't necessary if you added it as a plugin
I am developing an app which has a list of objects that I want to paginate. I found vuejs-paginate plugin but I can't make it work in my view.
After installing it via npm and importing in the view, its tag is in fact in the HTML skeleton of the page, but it shows nothing. No error is displayed in the console either, only this Vue warning:
[Vue warn]: Failed to resolve component: paginate
Might it be a problem with the import? Could you help me?
I attach part of my code so you can see how I've declared it.
<template>
<ion-page>
<ion-content>
<paginate
:pageCount="10"
:containerClass="'pagination'"
:clickHandler="clickCallback"
>
</paginate>
</ion-content>
</ion-page>
</template>
<script>
import {
IonContent,
IonPage,
} from "#ionic/vue";
import { defineComponent } from "vue";
import { VuejsPaginate } from "vuejs-paginate";
export default defineComponent({
name: "Gestion",
components: {
'paginate': VuejsPaginate,
},
methods: {
clickCallback: function(page) {
console.log(page)
},
});
</script>
This has also happened to me when trying to import other "external" components. Could it be a problem related to Ionic?
Thank you in advance!
I'm trying to dynamically show a footer/header based on a child view in ionic
I am using the Ionic 4 framework in combination with Vue.js. Tried slots and such having the feeling i'm on the right track but not fully there yet.
I've got a Base.vue (component) which holds
<template>
<ion-app>
<ion-page class="ion-page" main>
<page-header />
<router-view />
<page-footer />
</ion-page>
</ion-app>
</template>
<script>
import PageHeader from '#/components/PageHeader'
import PageFooter from '#/components/PageFooter'
import { mapState } from 'vuex'
export default {
name: 'master',
components: {
PageHeader,
PageFooter,
},
}
</script>
As a child view i've got the following; i know that it's not the right approach to include it inside the <ion-content> but don't know how to set this up in the correct way:
<template>
<ion-content fullscreen>
<page-header>
<ion-toolbar>
<ion-title>
Test
</ion-title>
</ion-toolbar>
</page-header>
<ion-content>
<p>Schedule page</p>
</ion-content>
</ion-content>
</template>
<script>
import PageHeader from '#/components/PageHeader'
export default {
name: 'schedule',
components: {
PageHeader,
},
}
</script>
The header component (which should be dynamic):
<template>
<ion-header>
<slot name="header" />
</ion-header>
</template>
<script>
export default {
name: 'page-header',
}
</script>
What i'm trying to do is making a Base.vue with a dynamic header (PageHeader.vue) so based on a given child view i could change or extend the header if needed.
So I think you're saying you want to change the content of the page header depending on the child.
Components cannot directly affect the templates of other components in the tree. Slots give you some control over this, but it is limited to allowing a component to inject templates into sections of a child component, not the other way around.
Your options are:
Add logic to your parent component which detects what child component is shown and then change the page header accordingly. The page header won't be controlled directly by the child component, though.
Use named views with vue-router.
Use something like portal-vue, but don't go crazy with this kind of power...
I have just started with Vue and am having an issue where the component isn't rendering for me.
<template>
<div>
<GalleryCollectionBlueBottles />
</div>
</template>
<script>
import GalleryCollectionBlueBottles from '#/components/collections/GalleryCollectionBlueBottles.vue'
export default {
name: 'GalleryCollections'
}
</script>
When I inspect the page in a browser all I see is an element with the component name, not the contents of the component as usual.
The component above is called GalleryCollections and the component I'm importing is called GalleryCollectionBlueBottles.
Hope someone can help, also hoping this is something simple I've overlooked :)
You need to also declare the component inside your script tag within the keyword components{ ... } like;
<script>
import GalleryCollectionBlueBottles from '#/components/collections/GalleryCollectionBlueBottles.vue'
export default {
name: 'GalleryCollections',
components: {
GalleryCollectionBlueBottles
}
}
</script>