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.
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?
in my nuxt application. in layout file use dynamic component for set the component in different pages like below
<template>
<div id="app">
<div id="app-body">
<div id="app-topbar">
<component v-bind:is="actionBar.component"></component>
</div>
<div id="app-content">
<nuxt />
</div>
</div>
</div>
</template>
but when I'm runing the application I got the error in below
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.
I'll try to wrap my component in no-ssr tags but the error still exist
as DigitalDrifter already said, you need to use the compiler-included build.
To do that in nuxt try to add the following to your nuxt.config.js:
build: {
extend(config, ctx) {
config.resolve.alias['vue'] = 'vue/dist/vue.common'
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.
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 recently started using Vue and I was looking for getting to use Vue.Draggable on my project. Due to framework and current setup in use I haven't been able to implement single-page-component .vue-files, and have instead simply written app & components with string-templates to .js -files.
I'm unable to figure out how to include draggable to my application.
Basic structure looks like follow:
#HTML
<div id="app">
<mycomponent></mycomponent>
</div>
<script src="vuedraggable.js"></script>
<script src="component.js"></script>
<script src="app.js"></script>
--
#app.js (simply a wrapper)
var vm = new Vue({
el: '#app',
});
--
#component.js
Vue.component('mycomponent',{
template: `
<form>
<h2>{{ form.label }}</h2>
<draggable v-model="form.fields" class="dragArea">
<div v-for="field in form.fields">
<field :field="field"></field>
</div>
</draggable>
</form>
`,
data: function() {
return {
form: { ... form-structure-to-be ...}
};
},
});
With this structure I'm getting error "vue.js:440 [Vue warn]: Unknown custom lement: - did you register the component correctly?"
I haven't been able to figure out either "require" nor "import" method and assume that both require bootstrapping. Due to environment I'm working with I'm having hard time installing libraries with NPM & strapping, and I would prefer to register components manually - is this possible and how?
Could someone please give me directions ?