I want to add f7-timeline component in my Vue app.
I added Framework7 and Framework7Vue in my app.js file. Other Framework7 components like <f7-button> and <f7-progressbar> works properly. But when I use <f7-timeline>, give this error in console :
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> at src/pages/timeline/timeline.vue
<F7View>
<F7App>
<App> at src/app.vue
<Root>
<template>
<f7-page>
<f7-timeline>
<f7-timeline-item day="21" month="DEC" inner content="Some text goes here"></f7-timeline-item>
<f7-timeline-item day="22" month="DEC" inner content="Another text goes here"></f7-timeline-item>
</f7-timeline>
<f7-button>Button Text</f7-button>
<f7-progressbar :progress="20"></f7-progressbar>
</f7-page>
</template>
Any help will greatly be appreciated.
f7-timeline is used by Framework7 Vue.js V1 and its deprecated. in the Latest Version (4.1.1) you can display your timeline using normal HTML like this:
<div class="timeline">
<div class="timeline-item">
<div class="timeline-item-date">21 <small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="timeline-item-inner">
<div class="timeline-item-time">12:30</div>
<div class="timeline-item-title">Title</div>
<div class="timeline-item-subtitle">Subtitle</div>
<div class="timeline-item-text">Text</div>
</div>
</div>
</div>
<div class="timeline-item">
... another timeline item ...
</div>
</div>
For more information, you can check the Framework7 Vue.js Kitchen skin for timeline demo.
Related
I integrated vue18n into my vue3 application. Everythings works fine but when I try to execute my unit tests (I'm using Jest) I have an error:
TypeError: Cannot read properties of undefined (reading 'deep')
As I wrote, I have errors only during the testing phase.
During my analysis I discovered that, probably, the issue it's related to a nested component.
I start the test from a component 'list', I trigger the click on a list item in order to show this 'popup' component.
In my test I initialize the component 'list' using mount instead of the shallowMount.
In this nested component "popup" I have this template:
<template>
<full-screen-popup ref="popup">
<div class="confirm-dialogue-container">
<div class="dialog-header">
<h1 id="confirm-title-lbl" v-t="titleKey"></h1>
<i18n-t :keypath="messageKey" tag="h2" id="confirm-message-lbl" scope="global">
<template v-slot:name>
<b id="confirm-name-lbl">{{name}}</b>
</template>
<template v-slot:surname>
<b id="confirm-surname-lbl">{{surname}}</b>
</template>
</i18n-t>
</div>
<div class="actions-container">
<button id="bt-confirm-delete" class="btn-action primary" v-t="confirmLblButton" #click="_confirm"></button>
<button id="bt-cancel-delete" class="btn-action " v-t="cancelLblButton" #click="_cancel"></button>
</div>
</div>
</full-screen-popup>
</template>
If I try to remove this content I don't have the error (obviously, I have other errors because the html dom will be empty).. but probably the issue it's related to this code.
I'm not able to understand the reason.
Any suggestions?
Node Version : v10.14.1
NPM Version : 6.4.1:
OS: Windows
Description:
I have integrated algolia in my vuejs project which is working very well. Now i am upgrading this module from version 1.7.0 to 2.0.0. On upgrading package, it shows console errors and nothing is displayed on screen. I also tried to solve it by including required packages but did't get the results. Here are console errors:
[Vue warn]:Unknown custom element: <ais-index> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <ais-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option
[Vue warn]: Error in nextTick: "TypeError: It looks like you forgot to wrap your Algolia search component "<ais-refinement-list>" inside of an "<ais-instant-search>" component."
TypeError: It looks like you forgot to wrap your Algolia search component "<ais-refinement-list>" inside of an "<ais-instant-search>" component.
Here is my code:
<template>
<div id="app">
<p>{msg}</p>
<div id="app">
<ais-index app-id="latency" api-key="6be0576ff61c053d5f9a3225e2a90f76" index-name="ikea">
<ais-search-box placeholder="Search for a product..."></ais-search-box>
<ais-results>
<template scope="{ result }">
<div class="search-result">
<img class="result__image img-responsive" :src="result.image">
<div class="result__info">
<h2 class="result__name">
<ais-highlight :result="result" attribute-name="name"/>
</h2>
<div class="result__type">
<ais-highlight :result="result" attribute-name="type"/>
</div>
<div class="result__rating">
<template v-for="n in 5">
<span v-if="n <= result.rating" class="result__star"></span>
<span v-else class="result__star--empty"></span>
</template>
</div>
<div class="result__price">${{result.price}}</div>
</div>
</div>
</template>
</ais-results>
<ais-pagination v-bind:class-names="{'ais-pagination': 'pagination'}"></ais-pagination>
</ais-index>
</div>
</div>
</template>
<script>
//main.js
import 'babel-polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import InstantSearch from 'vue-instantsearch'
//router
import router from './router'
Vue.use(InstantSearch)
Vue.config.productionTip = false
new Vue({
store,
router,
i18n,
render: h => h(App)
}).$mount('#app')
What changes are required to make it work? If anyone needs more info please let me know.
Thanks!
Based on your error message:
TypeError: It looks like you forgot to wrap your Algolia search component "<ais-refinement-list>" inside of an "<ais-instant-search>" component.
it looks like <ais-instant-search> could be required with the new major version of the vue-instantsearch API.
So, wrap the component with <ais-instant-search> and see how it goes :)
I have some very simple vue code as shown below:
Vue.component('tabs', {
template: `
<div class="">
<div class="tabs">
<ul>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
<div class="tab-detail">
<slot></slot>
</div>
</div>
`
});
new Vue ({
el: '#root'
});
and HTML code
<div id="root" class="container">
<tabs>
</tabs>
</div>
the problem I have is that the safari throws a warning:
[Vue warn]: Unknown custom element: <tabs> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
I am a Vue beginner so I was looking for the solution but the answer I got was that I should just declare the new Vue after the component. That I did but I am still getting this error.
This is because Safari does not support es6 template string syntax ``. In order to fix it you should use Webpack or just a Babel to add support for new es6 features.
HTML:
<div class="a">
Some HTML ...
</div>
<div class="b">
Some HTML
</div>
Javascript:
new Vue({
el: "#item_info",
....
....
(Other Config)
....
....
})
The two div above need to show the information from vue,
I tried using <template></template> like:
<template>
(my two div)
</template>
but it does not work because both divs need to be inside a root element.
I know that if I modify my html to:
<div id="item_info">
<div class="a"></div>
<div class="b"></div>
</div>
It can work, but I have no authorization to modify the base Html structure
Is there any other way that could help me solve it?
Maybe you should try to split those div's in two components and then add them to parent.
One.vue
<template>
<div class="a">
Some HTML ...
</div>
</template>
Two.vue
<template>
<div class="b">
Some HTML
</div>
</template>
Three.vue
<template>
<One></One>
<Two></Two>
</template>
If you have no authorization then I think you can't put that <template></template> either. Vue JS doesn't allow selecting multiple elements. But you can use Vue Component, please refer to this official link of Vue JS: https://v2.vuejs.org/v2/guide/components.html.
But remember Component also requires one root element.
I have a responsive-menu component which I want to use named slots inside of this up my template markup:
<template>
<div class="responsive-menu">
<div class="menu-header">
<slot name="header"></slot>
</div>
</div>
</template>
Whenever I try my named slot like this it work perfectly fine:
<responsive-menu>
<h3 slot="header">Responsive menu header</h3>
</responsive-menu>
However as soon as I wrap it with a class nothing shows up anymore.
<responsive-menu>
<div class="container">
<h3 slot="header">Responsive menu header</h3>
</div>
</responsive-menu>
What is going on here? Shouldn't I just be able to wrap the named component? Which does it appear that my named slots need to be direct children of my Vue component?
It does not work because your "wrapped slot" isn't direct child of responsive-menu tag.
try something like that:
<responsive-menu>
<div class="container" slot="header">
<h3>Responsive menu header</h3>
</div>
</responsive-menu>
jsfiddle
It works with Vue >= 2.6. Just upgrade vue and vue-template-compiler.