I am setting up the first app using Nuxtjs and Antd. I am using babel-plugin-import to reduce bundle size of Antd.
It works fine but in the component, it seem strange.
with babel-plugin-import
<template>
<Button type="primary">Enjoy it</Button>
</template>
<script>
import { Button } from 'ant-design-vue'
export default {
components: {
Button
}
}
</script>
On the official docs, they are using different tags.
<a-button type="primary">Primary</a-button>
This is the docs from Ant Design of Vue.
How can I find the docs when using with babel-plugin-import. I already search many times on the internet. But I am not finding any results.
the elegant way:
components: {
[Button.name]: Button
}
I just found the solution.
<script>
import Button from 'ant-design-vue/lib/button';
export default {
components: {
'a-button':Button
}
}
</script>
In this thread: Import UI library modularized in nuxtjs
Related
I know there are a few questions similar to this but they did not work for me so I am posting this.
I am trying to add jsPlumb into my Nuxtjs/Vuejs application. I did the following steps:
npm i jsplumb --save
Create a Vuejs page and add the simple code:
<template>
<client-only>
<div id="canvas" />
</client-only>
</template>
<script>
import { jsPlumb } from 'jsplumb'
export default {
mounted () {
if (process.client) {
console.log('MOUNTED - 2')
jsPlumb.ready(function () {
console.log('MOUNTED - 3')
})
}
}
}
</script>
I get the error:
ReferenceError
document is not defined
I tried many things which were mentioned but nothing seems to work.
Instead of using process.client I used the process.browser and it worked fine for me. Please refer the link: https://stackoverflow.com/a/69822954/7584240
I have created a ionic vue 3 tabs starter application.
Im trying to to switch tab programmatically from one tab to another
here is my situation
// in Tab1.vue page
setup(props, context) {
function moveToTab3(){
// here I need the code to switch tab1 to tab3
// possible to call tabs.select() method here ?
}
}
// my Tabs.vue page
<ion-tabs ref="tabs" >
I searched in the ionic docs and vue docs to know how to get the parent component from a child component, I have not got a solution yet.
any help is much appreciated, Thank you so much
yes you can absolutely do that programmatic routing provided you have access to Vue-Router because ionic under the hood uses Vue router for navigation and since tabs are top-level navigation you can simply call
$router.push OR $router.replace inside of your setup function on button click or bind the tab using router-link
Here is the documentation from Ionic related to Navigation/Routing Link And
I think this is what you are looking for Accessing The Ionrouter Instance Link
=====Update =====
Taken directly from the documentation Link, As you can see in the template on Ion-Button a simple #click is used to push the route you wish to navigate, while in script tag useRouteris accessed from the core vue-router to get access to the underlying router
<template>
<ion-page>
<ion-content>
<ion-button #click="() => router.push('/detail')">Go to detail</ion-button>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonButton, IonContent, IonPage } from '#ionic/vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'HomePage',
components: {
IonButton,
IonContent,
IonPage
},
setup() {
const router = useRouter();
return { router };
}
})
</script>
The same link also shows how you use router-link on Ion-Button
<ion-button router-link="/detail">Go to detail</ion-button>
without having to tap into a method.. either way, works...
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 using Vue Onsen UI and trying to render a Vue single file component for each tab.
In the documentation here, they make use of template in a single page. Which is not very reusable. I want to be able to import custom component and render that.
Here is something that I'm trying to do which doesn't seem to work.
<template lang="html">
<v-ons-page>
<!-- top tab bar -->
<v-ons-tabbar position="top" :index="0">
<v-ons-tab label="Browse" page="TaskList">
</v-ons-tab>
<v-ons-tab label="Second">
</v-ons-tab>
</v-ons-tabbar>
</v-ons-page>
</template>
<script>
import TaskList from './TaskList';
export default {
template: '#main',
components: {
'task-list': TaskList,
},
};
</script>
<style lang="scss">
</style>
Can you suggest anything that I should try?
Instead of using tab objects that reference the components directly, use the :tabs property of the tabbar to set up the pages:
<template lang="html">
<v-ons-page>
<v-ons-tabbar position="top" :index="0" :tabs="tabs">
</v-ons-tabbar>
</v-ons-page>
</template>
<script>
import TaskList from './TaskList';
import SecondPage from './SecondPage';
export default {
template: '#main',
data: function () {
return {
tabs: [
{label: 'Browse', page: TaskList},
{label: 'Second', page: SecondPage}
]
}
}
};
</script>
Also, make sure the root element of the components you reference in the page property are <v-ons-page> elements.
I was having the same difficulty with the following syptoms:
Tabs were not appearing at all
No errors in CLI or in console
Note that I was also using the "Hello World" app that is generated from the CLI (vue init OnsenUI/vue-pwa-webpack hello-world)
Resolution
It was pretty simple in the end: there is a file in the root of the folder called vue-onsen-components.js which has all of the components and some of them are commented out. I had to uncomment the following lines and then the tabs appeared:
export { default as VOnsTab } from 'vue-onsenui/esm/components/VOnsTab'
export { default as VOnsTabbar } from 'vue-onsenui/esm/components/VOnsTabbar'
I'm a new vuejs developer. I have study vueje for a while and now I decided to develop a project using vuejs.
So I learn about nuxtjs which is server side rendering. everything goes well. I can use bootstrap4 with my project.
Now I would like to use flickity carousel https://flickity.metafizzy.co on my project and I found that there is a vuejs package on https://github.com/drewjbartlett/vue-flickity
I follow the instruction how to install this component to my project by
npm install vue-flickity --save
and put on some code
<script>
import Logo from '~/components/Logo.vue'
import Searchbar from '~/components/Searchbar.vue'
import axios from 'axios'
import Flickity from 'vue-flickity';
export default {
data () {
return {
has_location: false,
flickityOptions: {
initialIndex: 3,
prevNextButtons: false,
pageDots: false,
wrapAround: true
}
}
},
components: {
Logo,
Searchbar,
Flickity
}
}
</script>
but it show window is not defined
I have try this with another component like google map, it's show the same error.
Please tell me what wrong did I do and how to install new component to the project.
Thank you.
Nuxt.js use SSR to render your website server side, therefore window object is not accessible on node.js environment.
What you need to do is use the built-in no-ssr component to prevent Nuxt.js to render it on the server side.
You can simply do this:
<no-ssr>
<Flickity :options="...">
<!-- slides -->
</Flickity>
</no-ssr>
UPDATE: If you still get an error at this point, then load Flickity in
a custom Plugin that you will load with ssr disabled
Create a file named plugins/VueFlickity.js
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('Flickity', Flickity)
Then in your nuxt.config.js your add:
module.exports = {
// ...
plugins: [
{ src: '~/plugins/VueFlickity.js', ssr: false }
]
}
Don't forget to remove the Flickity local component registration:
components: {
Logo,
Searchbar
// Flickity <-- remove this line
}
This was tested and is now fully working.
I fixed it with:
let Flickity = {};
if (process.browser) {
Flickity = require('flickity.js');
}
#rayfranco pointed a great way.:) The thing is that by doing this in that way You're importing this plugin globally, but not as local component which is better for performance.
So You can do it also like this:
let Flickity;
if (process.client) {
Flickity = require('vue-flickity')
}
export default {
components: {
Flickity
}
}
and use this component this way:
Important: <no-ssr>......</no-ssr> is deprecated in Nuxt > 2.9, so use
<client-only>
<Flickity :options="...">
<div class="carousel-cell">1</div>
<div class="carousel-cell">2</div>
<div class="carousel-cell">3</div>
</Flickity>
</client-only>
you can also look into brief example by Josh Deltener
https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/