I am trying to pop up a Sweetalert2 modal, but I am struggling to install it correctly
I have use npm i vue-sweetalert2 to install it.
But I am getting two errors, one that "The "VueSweetalert2" component has been registered but not used."
And that this.$swal is not recognized.
I think that I have initialized it correctly.
<template>
<div>
<q-btn
label="Click me"
#click="clickHandler"
/>
</div>
</template>
<script>
import VueSweetalert2 from 'vue-sweetalert2';
export default {
name: 'IndexPage',
components: {
VueSweetalert2,
},
methods: {
clickHandler() {
this.$swal({
title: 'test',
text: 'test',
icon: 'info',
confirmButtonText: 'Ok',
});
},
},
};
</script>
Related
I am trying to create a calendar with slots for appointments so the user can click and pick a time to make a booking.
I am using the template from the package vue-meeting-selector. The problem is that the calendar itself doesnt display on the page.
This is the code for the template
`
<template>
<div id="app">
<vue-meeting-selector
class="simple-example__meeting-selector"
v-model="meeting"
:date="date"
:loading="loading"
:class-names="classNames"
:meetings-days="meetingsDays"
#next-date="nextDate"
#previous-date="previousDate"
/>
<p>meeting Selected: {{ meeting ? meeting : "No Meeting selected" }}</p>
</div>
</template>
<script>
import VueMeetingSelector from "vue-meeting-selector";
import data from "./data.json";
export default {
name: "App",
components: {
VueMeetingSelector,
},
data() {
return {
date: new Date(),
meetingsDays: [],
meeting: { date: "2021-01-15T08:00:00.000Z" },
loading: true,
nbDaysToDisplay: 5,
};
},
methods: {
// #click on button-right
async nextDate() {
console.log("nextDate");
},
// #click on button-left
async previousDate() {
console.log("previousDate");
},
},
async created() {
this.meetingsDays = data;
this.loading = false;
},
};
</script>
<style>
</style>
`
I did import the package on my component
import VueMeetingSelector from "vue-meeting-selector";
and I also installed the package npm install --save vue-meeting-selector
I get no error when trying to run the frontend. It just doesnt display the calendar.
Any idea what I could be missing
Sources where I got this template from:
https://codesandbox.io/s/vue-meeting-selector-ex-forked-lyw515?file=/src/App.vue:0-1084
https://www.npmjs.com/package/vue-meeting-selector?activeTab=readme
I'm trying to import vue-collage-slideshow in nuxt to make a gallery slideshow in my project , but it is giving me an error, Please any help will be highly appreciated.
the code is given below
<template>
<div id="collage">
<client-only placeholder="Loading...">
<slideshow
:images="images"
:collage-size-min="5"
:collage-size-max="5"
:slides-interval="4000"
:show-no-images-msg="true"
no-images-msg="No Images"
:show-loading-msg="true"
loading-msg="Loading..."
height="100%"
>
</slideshow>
</client-only>
</div>
</template>
<script>
import Slideshow from 'vue-collage-slideshow'
export default {
name: 'Collage',
components: {
Slideshow,
},
data() {
return {
images: [
{ image: 'https://wallpapershome.com/images/pages/pic_v/5111.jpg' },
{
image:
'https://thumbor.forbes.com/thumbor/1280x868/https%3A%2F%2Fblogs-images.forbes.com%2Fannabel%2Ffiles%2F2018%2F02%2FLouisville_Skyline-1200x801.jpg',
},
{ image: 'https://t-ec.bstatic.com/images/hotel/max1024x768/683/68345284.jpg' },
{ image: 'https://i.pinimg.com/originals/08/ec/94/08ec94ecf38048a2102ec4783dc88fa8.jpg' },
{ image: 'https://t-ec.bstatic.com/images/hotel/max1024x768/873/87316855.jpg' },
],
}
},
}
</script>
Your code is totally fine and everything is working as expected, you only need to fix the broken URL:
https://t-ec.bstatic.com/images/hotel/max1024x768/683/68345284.jpg
Hence the 404 error
Is there a way to mount multiple components on a single vue instance.
I have my admin dashboard and a forum page and i don't want header and navigation to show up on these pages.
Here's what I've tried:
import App from "./App.vue";
import Admin from "./Admin.vue";
import Forum from "./Forum.vue";
const app = new Vue({
router,
store,
components: {
App, Admin, Forum
}
}).$mount("#app");
Then in my App.vue, I have other child components
<template>
<div>
<div class="general-page">
<AppHeader></AppHeader>
<transition name="fade">
<router-view></router-view>
</transition>
<AppFooter></AppFooter>
</div>
</div>
</template>
<script>
import AppHeader from "./components/AppHeader";
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
components: {
AppHeader,
Login,
Register,
AppFooter
}
};
</script>
In Forum.vue
<template>
<div>
<div class="forum-page">
<ForumHeader></ForumHeader>
<transition name="fade">
<router-view></router-view>
</transition>
<ForumFooter></ForumFooter>
</div>
</div>
</template>
<script>
import ForumHeader from "./components/ForumHeader";
import ForumFooter from "./components/ForumFooter.vue";
export default {
components: {
ForumHeader,
ForumFooter
}
};
</script>
Admin.vue
<template>
<div>
<div class="admin-page">
<AdminHeader></AdminHeader>
<transition name="fade">
<router-view></router-view>
</transition>
<AdminFooter></AdminFooter>
</div>
</div>
</template>
<script>
import AdminHeader from "./components/AdminHeader";
import AdminFooter from "./components/AdminFooter.vue";
export default {
components: {
AdminHeader,
AdminFooter
}
};
</script>
Routes for Forum and Admin
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true
},
children: [
{
path: '',
name: 'Profile',
component: Profile
},
{
path: 'uploads',
name: 'Uploads',
component: Uploads,
meta: {
requiresCreatorAccess: true
}
},
{
path: 'add-post',
name: 'AddPost',
component: AddPost,
meta: {
requiresCreatorAccess: true
}
}
]
},
{
path: '/forum',
name: 'Forum',
component: Forum,
children: [
{
path: '',
name: 'Channel',
component: Channel
},
{
path: 'threads',
name: 'Threads',
component: Threads
},
{
path: 'topic',
name: 'Topic',
component: Topic
}
]
},
How do I dynamically go to each route and mount each component on el: #app ?
Without changing any routing and template structure, you could use CSS to hide the app header, footer.
Another option may be to v-if the app header,footer to not render when on those routes using something like $router.currentRoute for matching.
CSS
/*
Assuming app header and footer have an id attribute
Change to your needs
*/
#app-header,
#app-footer {
display: none;
}
v-if on currentRoute
We have to do a few of things here.
Create a data variable (showMe: true)
Create a method (evaluateShowMe)
Create a watcher for the route ('$route'()) Be aware of the quotes!
Note: Feel free to rename the variable and function to suit your needs.
We need to watch $route because this is outside of a <router-view/> so we need to do this dynamically so the variable performs the evaluator function every time the route changes.
App.vue:
<template>
<div>
<div class="general-page">
<AppHeader
v-if="showMe"
></AppHeader>
<transition name="fade">
<router-view></router-view>
</transition>
<AppFooter
v-if="showMe"
></AppFooter>
</div>
</div>
</template>
<script>
import AppHeader from "./components/AppHeader";
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
components: {
AppHeader,
Login,
Register,
AppFooter
},
data() {
return {
showMe: true
}
},
methods: {
evaluateShowMe() {
// Get the substring of the path between first and second slash
// This will allow to include any child pathing
// NOTE: In my test the first index ([0]) was empty so used one ([1]) for the `filter`
const entryPath = this.$router.currentRoute.path.split('/').filter((x,i) => i === 1);
// We want to exclude the following paths i.e. hide when on these
// There should only be one item in the array so we extract with `[0]`
return (entryPath[0] !== 'admin' || entryPath[0] !== 'forum');
}
},
watch: {
'$route'() {
this.showMe = this.evaluateShowMe();
}
}
};
</script>
Hello I am having an issue with Nuxts ssr. I a trying to add 'vue-slick' to my web app and no matter what I do it continues to show "window is not defined".
As you can see I have tried multiple ways to allow vue-slick to be loaded on client side. Using plugins didn't help, using process.client in my component did not work as well.
Components/Carousel/Carousel.vue
<template>
<div class="carousel">
<Slick ref="slick" :options="slickOptions">
<a href="http://placehold.it/320x120">
<img src="http://placehold.it/320x120" alt="">
</a>
...
<a href="http://placehold.it/420x220">
<img src="http://placehold.it/420x220" alt="">
</a>
</Slick>
</div>
</template>
<script>
if (process.client) {
require('vue-slick')
}
import Slick from 'vue-slick'
export default {
components: {
Slick
},
data() {
return {
slickOptions: {
slidesToShow: 4
},
isMounted: false
}
},
methods: {
}
}
</script>
nuxt.config.js
plugins: [
{ src: '~/plugins/vue-slick', ssr: false }
],
plugins/vue-slick
import Vue from 'vue'
import VueSlick from 'vue-slick'
Vue.use(VueSlick);
Thanks for any help you can give!
So this is due to nuxt trying to render the slick component on the server side, even though you have set ssr: false in nuxt.config.
I have had this issue in other nuxt plugins and these steps should fix it.
in nuxt.config.js add this to your build object:
build: {
extend(config, ctx) {
if (ctx.isServer) {
config.externals = [
nodeExternals({
whitelist: [/^vue-slick/]
})
]
}
}
}
and in the page where you are trying to serve it you have to not mount the component until the page is fully mounted. So in your Components/Carousel/Carousel.vue set it up like this:
<template>
<div class="carousel">
<component
:is="slickComp"
ref="slick"
:options="slickOptions"
>
<a href="http://placehold.it/320x120">
<img src="http://placehold.it/320x120" alt="">
</a>
...
<a href="http://placehold.it/420x220">
<img src="http://placehold.it/420x220" alt="">
</a>
</component>
</div>
</template>
Then in your script section import your component and declare it like this:
<script>
export default {
data: () => ({
'slickComp': '',
}),
components: {
Slick: () => import('vue-slick')
},
mounted: function () {
this.$nextTick(function () {
this.slickComp = 'Slick'
})
},
}
</script>
Bascially this means the component isn't declared until the mounted function is called which is after all the server side rendering. And that should do it. Good luck.
I found another simple solution.
simply install "vue-slick" package to your nuxt project.
$ yarn add vue-slick
then component markup like below.
<template>
<component :is="slick" :options="slickOptions">
<div>Test1</div>
<div>Test2</div>
<div>Test3</div>
</component>
</template>
Finally set data and computed properties like this.
data() {
return {
slickOptions: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
centerMode: true,
},
};
},
computed: {
slick() {
return () => {
if (process.client) {
return import("vue-slick");
}
};
},
},
This solution prevents slick component importing globally as a plugin in nuxt config.
After a fresh build with vue-cli (3.0.0-rc.5) the path to the lottie module can't be reached. Should I play with the configs?
./lottie.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&
<template>
<div id="app">
<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
<div>
<p>Speed: x{{animationSpeed}}</p>
<input type="range" value="1" min="0" max="3" step="0.5"
v-on:change="onSpeedChange" v-model="animationSpeed">
</div>
<button v-on:click="stop">stop</button>
<button v-on:click="pause">pause</button>
<button v-on:click="play">play</button>
</div>
<script>
import Lottie from './lottie.vue';
import * as animationData from './assets/data.json';
export default {
name: 'app',
components: {
'lottie': Lottie
},
data() {
return {
defaultOptions: {animationData: animationData},
animationSpeed: 1
}
},
methods: {
handleAnimation: function (anim) {
this.anim = anim;
},
stop: function () {
this.anim.stop();
},
play: function () {
this.anim.play();
},
pause: function () {
this.anim.pause();
},
onSpeedChange: function () {
this.anim.setSpeed(this.animationSpeed);
}
}
}
</script>
If it still doesn't work change animationData to animationData.default in defaultOptions
defaultOptions: { animationData: animationData.default }
If you are using vue-lottie package then the import should be
import Lottie from 'vue-lottie';
This is because lottie package is located in the node_modules folder and you have to provide the right path or use direct package name import.
On a side note, I believe the current version of Vue cli is v3.1.1 so you should definitely upgrade.