Skip to content

Commit 9ecda7b

Browse files
danvincent11danvincent11
committed
fix: add slick carousel and mdi/js icons plugins
1 parent 1752e58 commit 9ecda7b

File tree

11 files changed

+221
-5
lines changed

11 files changed

+221
-5
lines changed

‎components/header/Header.vue

+10
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@
88
flat
99
color="white"
1010
>
11+
<nuxt-link to="/">
12+
<img
13+
src="/logo/Nuxify-Logo-withText.svg"
14+
lazy-src="/logo/Nuxify-Logo-withText.svg"
15+
alt="Nuxify Logo"
16+
width="180"
17+
height="66"
18+
/>
19+
</nuxt-link>
20+
<v-spacer />
1121
<v-btn
1222
v-for="page in pages"
1323
:key="page.icon"

‎nuxt.config.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,11 @@ export default {
7676
/*
7777
** Plugins to load before mounting the App
7878
*/
79-
plugins: [{ src: '~/plugins/repository' }],
79+
plugins: [
80+
{ src: '~/plugins/repository' },
81+
{ src: '~/plugins/components/vue-slick-carousel' },
82+
{ src: '~/plugins/components/icons' },
83+
],
8084
/*
8185
** Nuxt.js dev-modules
8286
*/
@@ -95,6 +99,7 @@ export default {
9599
'@nuxtjs/pwa',
96100
// Doc: https://github.com/nuxt-community/dotenv-module
97101
'@nuxtjs/dotenv',
102+
['vue-scrollto/nuxt', { duration: 1000 }],
98103
],
99104
/**
100105
* PWA module configuration

‎package-lock.json

+72-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,17 @@
2424
}
2525
},
2626
"dependencies": {
27+
"@mdi/js": "^5.9.55",
2728
"@nuxt/typescript-runtime": "^2.0.0",
2829
"@nuxtjs/axios": "^5.11.0",
2930
"@nuxtjs/dotenv": "^1.4.0",
3031
"@nuxtjs/pwa": "^3.0.0-0",
3132
"@types/jest": "^26.0.15",
33+
"babel-core": "^7.0.0-bridge.0",
3234
"nuxt": "^2.13.2",
3335
"nuxt-property-decorator": "^2.7.2",
34-
"babel-core": "^7.0.0-bridge.0"
36+
"vue-scrollto": "^2.20.0",
37+
"vue-slick-carousel": "^1.0.6"
3538
},
3639
"devDependencies": {
3740
"@nuxt/types": "^2.13.2",

‎pages/about.vue

+38-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
11
<template>
22
<v-container class="about__container mx-auto">
33
<h1>About</h1>
4+
<VueSlickCarousel
5+
:arrows="false"
6+
:rows="1"
7+
:slides-to-show="4"
8+
:autoplay="true"
9+
:infinite="true"
10+
:autoplay-speed="3000"
11+
:pause-on-dots-hover="false"
12+
:pause-on-focus="false"
13+
:pause-on-hover="false"
14+
:lazyLoad="true"
15+
class="my-12 pt-12"
16+
>
17+
<div v-for="(item, i) in ImageList" :key="i" class="justify-center">
18+
<v-img
19+
:src="item"
20+
:lazy-src="item"
21+
loading="lazy"
22+
alt="Client's Logo"
23+
width="290"
24+
height="auto"
25+
contain
26+
class="mx-auto px-5 mt-5"
27+
></v-img>
28+
</div>
29+
</VueSlickCarousel>
430
</v-container>
531
</template>
632

@@ -14,7 +40,18 @@ import { Component, Vue } from 'nuxt-property-decorator'
1440
}
1541
},
1642
})
17-
export default class About extends Vue {}
43+
export default class About extends Vue {
44+
ImageList: string[] = [
45+
'/logo/Nuxify-Logo-withText.svg',
46+
'/logo/Nuxify-Logo-withText.svg',
47+
'/logo/Nuxify-Logo-withText.svg',
48+
'/logo/Nuxify-Logo-withText.svg',
49+
'/logo/Nuxify-Logo-withText.svg',
50+
'/logo/Nuxify-Logo-withText.svg',
51+
'/logo/Nuxify-Logo-withText.svg',
52+
'/logo/Nuxify-Logo-withText.svg',
53+
]
54+
}
1855
</script>
1956

2057
<style scoped>

‎pages/users/index.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<v-container class="user__container mx-auto">
3+
<v-icon size="50" color="primary">{{ $data.mdiAccount }}</v-icon>
34
<h1 class="mb-6">Users</h1>
45
<nuxt-link v-for="user in users" :key="user.id" :to="`/users/${user.id}`">
56
<p>{{ user.name }}</p>

‎plugins/components/carousel.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Vue from 'vue'
2+
import VueSlickCarousel from 'vue-slick-carousel'
3+
4+
Vue.use(VueSlickCarousel)

‎plugins/components/icons.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Vue from 'vue'
2+
import {
3+
mdiAccount,
4+
mdiChevronRight,
5+
mdiFacebook,
6+
mdiGithub,
7+
mdiGmail,
8+
mdiLinkedin,
9+
mdiMenu,
10+
} from '@mdi/js'
11+
12+
Vue.mixin({
13+
data: () => {
14+
return {
15+
mdiAccount,
16+
mdiChevronRight,
17+
mdiFacebook,
18+
mdiGithub,
19+
mdiGmail,
20+
mdiLinkedin,
21+
mdiMenu,
22+
}
23+
},
24+
})

‎plugins/components/vue-slick-carousel.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
import VueSlickCarousel from 'vue-slick-carousel'
3+
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
4+
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
5+
6+
Vue.component('VueSlickCarousel', VueSlickCarousel)

‎static/logo/Nuxify-Logo-withText.svg

+54
Loading

‎types/package.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare module '@mdi/js'
2+
declare module 'vue-slick-carousel'

0 commit comments

Comments
 (0)