I am trying to use this component in my project. Below code is working.
<template>
<vuetable
ref="vuetable"
api-url="https://vuetable.ratiw.net/api/users"
:fields="['name', 'email']"></vuetable>
</template>
But it is not working when I change api-url like below
<template>
<vuetable
ref="vuetable"
api-url="http://127.0.0.1:8000/api/addresses"
:fields="['name', 'email']"></vuetable>
</template>
I am getting error like below.
I am getting below error while trying trying to browse URL through browser.
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?
I'm trying to set up vue-router; in my top-level App.vue, I have
<template>
<div>
App.vue: hello,
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<hr/>
<router-view></router-view>
</div>
</template>
and it works fine.
I'd like to include these links in a component, but that gives me an error
"Failed to resolve component: router-link"
Any pointers to where I should look for an answer? I've read the API documentation but it doesn't make any reference to any file or import needed in my component file. TIA
I am having problems with my Nuxt.js site.
I have defined a page, with a dynamic slug param, like this:
/solutions/:slug
If I visit the page directly in the browser, it loads correctly!
But if I click the nuxt-link in my NavBar component, I get the following error in the console, and the page does not load:
vue.runtime.esm.js?2b0e:619
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
I have a default layout file that looks like this:
layouts/default.vue
<template>
<div>
<NavBar />
<Nuxt />
</div>
</template>
<script>
import NavBar from "~/components/Layout/NavBar"
export default {
components: {
NavBar,
},
}
</script>
My navbar contains the following nuxt-link:
components/Layout/NavBar.vue
<template>
<b-navbar wrapper-class="container" fixed-top>
<template slot="end">
<nuxt-link
:to="{
name: 'solutions-slug',
params: { slug: 'performance' },
}"
class="navbar-item"
target="self"
>
<span class="icon is-medium">
<i class="ic ic--larger ic-b1-graph-bars-chart-rise" />
</span>
<span class="label">
Performance
</span>
</nuxt-link>
</template>
</b-navbar>
</template>
I have a page, defined by the slug param:
pages/solutions/_slug.vue
<template>
<div class="solution">
This is my solution page.
</div>
</template>
I am trying to understand why clicking the nuxt-link fails to load the page, even though I see the URL change in the browser correctly.
Thanks
After version v2.13, Nuxt can auto-import your components when used in your templates.
check the nuxt.config.js if components attribute is true then you don't need to import your component on the .vue files.
in your layouts/default.vue remove script tag ;-)
<template>
<div>
<NavBar />
<Nuxt />
</div>
</template>
If you need to categorize your components by folder, do the following.
goto nuxt.config.js and change your components attribute
export default {
components: {
dirs: [
'~/components',
{
path : '~/components/site/',
prefix: 'Site'
},
{
path : '~/components/admin',
prefix: 'Admin'
},
{
path : '~/components/admin/sub',
prefix: 'AdminSub'
}
]
}
}
for example, we have these components :
components
| site
- header
| admin
- header
- footer
| sub
- header
- footer
when we need to call components just separate prefixes and component names with a dash or write camelcase.
in your layouts/default.vue remove script tag ;-)
<template>
<div>
<!-- with dash -->
<site-header></site-header>
<admin-header></admin-header>
<admin-sub-header></admin-sub-header>
<!-- cammel -->
<SiteHeader></SiteHeader>
<AdminHeader></AdminHeader>
<AdminSubHeader></AdminSubHeader>
</div>
</template>
Attention: For Root Components /components/nav.vue, We Must Use CammelCase <Nav/> and if we call this component like this <nav/> it doesn't work.
Probably the problem is not related to anything described above.
First, check if your configuration is correct. I see you are using 'nuxtjs/content' module, so you are probably using Contentful as well. In the past, I have encountered a similar situation ('Failed to mount component: template or render function not defined' issue) due to incorrect installation of the 'dotenv' module that I used to store variables.
In my case, the application did not load variables from the .env file. As a consequence, they went to the Contentful client unidentified and caused the js error. For some reason, this error did not always appear in the console. Instead, the above-mentioned Warn appeared.
Make sure you have the 'dotenv' module correctly installed (if you use it). I remember that in my case it was necessary to install 'nuxtjs/dotenv' instead of the usual dotenv.
Let me know if this is the case. Good luck
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 a custom element like the nav-bar in the skeleton-navigation except I am not using the router part. I can't seem to get it to fire any events.
Code:
nav-bar.html
<template>
<ul id="topMenu"></ul>
</template>
nav-bar.js
attached() {
alert('test')
}
Containing page:
<template>
<require from="./nav-bar.html"></require>
<div class="desktop" id="container">
<nav-bar></nav-bar>
</div>
</template>
When you load the custom element using .html at the end of the path, Aurelia does not load the .js file. Just change your require element to the following, and it will work as you expect:
<require from="./nav-bar"></require>