Installing Bootstrap
We have use bootstrap to design most of the components, make sure you install it and integrate with the project.
step 1:
npm install --save bootstrap
step 2:
Create useBootstrap.client.ts file in plugins folder all the following code:
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.provide('bootstrap', bootstrap)
})
Title modules
Title 1
new
"emergency call"
<div className="title-1">
<span className="title-label">new</span>
<h2>
"emergency call"
</h2>
</div>
Title 2
Featured... Destinations
Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum has been standard.......
<div className="title-2">
<h2>Featured... <span>Destinations/span></h2>
<p>Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum has been standard.......</p>
</div>
Title 3
new
our happy customercustomer
<div className="language-HTML" id="titlecode1">
<div className="title-3 rounded">
<span className="title-label">new</span>
<h2>our happy customer<span>customer</span></h2>
</div>
auto height adjustment
Ratio Classes: Change your image proportion by just adding class
If you use image as background than add class ".bg-img" in image and add below class in parent.
- .ratio_40 - 40%
- .ratio_45 - 45%
- .ratio2_1 - 50%
- .ratio2_3 - 60%
- .ratio3_2 - 66.66%
- .ratio_landscape - 75%
- .ratio_square - 100%
- .ratio_asos - 127.77%
- .ratio_portrait - 150%
- .ratio1_2 - 200%
Fonts
You can change font of your theme from nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{ href: 'https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap', rel: 'stylesheet' },
{ href: 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900&display=swap', rel: 'stylesheet' },
{ href: 'https://fonts.googleapis.com/css?family=Vampiro+One&display=swap', rel: 'stylesheet' },
{ href: 'https://fonts.googleapis.com/css?family=Dancing+Script&display=swap', rel: 'stylesheet' },
{ href: 'https://fonts.googleapis.com/css?family=Pacifico&display=swap', rel: 'stylesheet' },
{ href: 'https://fonts.googleapis.com/css?family=Bangers&display=swap', rel: 'stylesheet' }
],
}
},
})
Charts
Apex Charts Example
Installing and usage
npm i vue3-apexcharts
I will create Apexchart file in Component folder
Inside Your template tags add
<ClientOnly>
<VueApexCharts :height="height" :type="type" :options="options" :series="series" />
</ClientOnly>
Inside Your script tags add
<script lang="ts" setup>
import VueApexCharts from "vue3-apexcharts";
let props = defineProps(['height', 'type', 'options', 'series']);
</script>
Then Import a folder in plugin.ts file
import { defineNuxtPlugin } from '#app'
import VueApexCharts from "@/components/apexcharts.vue";
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.component('apexchart', VueApexCharts)
})
Inside Your template tags add
<apexchart height="350" type="radialBar" :options="chartOptions" :series="series"></apexchart>
Inside Your script tags add
<script lang="ts" setup>
const series = [50, 30, 20]
const chartOptions = {
chart: {
height: 350,
type: "radialBar",
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: "22px",
},
value: {
fontSize: "16px",
},
total: {
show: true,
label: "Total",
formatter: function () {
return 80
},
},
},
},
},
labels: ["Apples", "Oranges", "Bananas", "Berries"],
colors: ['#fa4962', '#379cf9', '#a264ff'],
stroke: { lineCap: "round", }
}
</script>
Maps
Rica have used 2 maps which is google map, leaflet map. following are the maps which used for map box.
Google Map
Installing and usage
npm i vue3-google-map
Inside Your template tags add
<GoogleMap :center="center" :zoom="4" style="width: auto; height: 100%">
<Marker v-for="(location, index) in positions.lists" :key="index"
:options="{ position: { lat: location.lat, lng: location.lng } }" />
</GoogleMap>
Inside Your script tags add
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { GoogleMap, Marker } from "vue3-google-map";
interface item {
lat: number,
lng: number,
}
const center = ref- ({ lat: 50, lng: 5 });
const positions = reactive({
lists: ref
([
{ lat: 48.8567, lng: 2.3508 },
{ lat: 41.9, lng: 12.5 },
{ lat: 52.5166, lng: 13.3833 },
{ lat: 40.4, lng: -3.6833 },
{ lat: 51.5008, lng: -0.1224 },
]),
})
</script>
Leaflet Map
Installing and usage
npm i @vue-leaflet/vue-leaflet
Inside Your template tags add
<l-map ref="locationsMap" :min-zoom="polygon.minZoom" :max-zoom="polygon.maxZoom" :zoom-animation="true"
:zoom="polygon.zoom" :center="polygon.center" :useGlobalLeaflet="false" :options="{ tap: false }">
<l-tile-layer :url="polygon.url" />
<template v-for="(item, index) in datas" :key="index">
<l-marker :lat-lng="[item.location_latitude, item.location_longitude]">
<div v-if="item.location_latitude && item.location_longitude">
<l-popup class="">
</l-popup>
<l-icon>
<img src="/images/leaflet/marker-icon.png" />
</l-icon>
</div>
</l-marker>
</template>
</l-map>
Inside Your script tags add
<script lang="ts" setupgt
import { getImages } from "@/composables/getImages"
import "leaflet/dist/leaflet.css";
import {
LIcon,
LMap,
LMarker,
LPopup,
LTileLayer
} from "@vue-leaflet/vue-leaflet";
let props = defineProps({
datas: Object
})
console.log("llppp", props.datas);
const polygon = {
minZoom: 13,
maxZoom: 13,
zoom: 13,
center: [25.206426, 55.319011],
color: '#ff00ff',
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
}
</scriptgt
DatePicker
Installing and usage
npm i @vuepic/vue-datepicker
In your plugin.ts file all the following code:
import Datepicker from '@vuepic/vue-datepicker';
import "@vuepic/vue-datepicker/dist/main.css";
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.component('Datepicker', Datepicker)
})
Inside Your template tags add
<Datepicker v-model="date" :format="format" placeholder="Depart Date" id="datepicker"
class="form-control open-select" />
Inside Your script tags add
<script lang="ts" setup>
import { ref } from 'vue';
const router = useRoute()
const date = ref();
const date1 = ref();
const filter = ref<boolean>(false)
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return ` ${day}/${month}/${year}`;
}
</script>