Vue Tabler Icons Guide
### Installation:
To install `vue-tabler-icons`, use either **npm** or **yarn**:
npm install vue-tabler-icons
# or
yarn add vue-tabler-icons### Usage in Vue 3:
Once installed, you can import and use icons as components:
<script setup>
import { IconHome, IconSettings } from "vue-tabler-icons";
</script>
<template>
<div>
<IconHome size="32" stroke-width="2" />
<IconSettings size="32" stroke-width="2" />
</div>
</template>### Props:
– **`size`** (default: `24`) → Controls the icon size.
– **`stroke-width`** (default: `2`) → Adjusts the stroke thickness.
– **`color`** → Sets the icon color.
### Example with Custom Color:
<template>
<IconUser size="40" stroke-width="1.5" color="blue" />
</template>Let me know if you need further customization or setup help! 🚀
—
## 📌 Installation
You can install it via **npm** or **yarn**:
npm install vue3-perfect-scrollbar
# or
yarn add vue3-perfect-scrollbarYou'll also need to install the original **perfect-scrollbar** package:
npm install perfect-scrollbar
# or
yarn add perfect-scrollbar—
## 🔧 Usage
### 1️⃣ **Global Registration**
Register `vue3-perfect-scrollbar` globally in your `main.js`:
import { createApp } from "vue";
import App from "./App.vue";
import PerfectScrollbar from "vue3-perfect-scrollbar";
import "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css"; // Import default styles
const app = createApp(App);
app.use(PerfectScrollbar);
app.mount("#app");Now you can use the “ component anywhere in your Vue application.
—
### 2️⃣ **Local Usage**
Instead of global registration, you can import it in a specific component:
<script setup>
import { PerfectScrollbar } from "vue3-perfect-scrollbar";
</script>
<template>
<perfect-scrollbar style="max-height: 300px; overflow: auto;">
<div style="height: 500px;">
<p>Custom scrollbar content...</p>
</div>
</perfect-scrollbar>
</template>—
## 🎨 Customization
You can pass options to customize the scrollbar behavior:
<template>
<perfect-scrollbar :settings="{ suppressScrollX: true }">
<div>
<p>Vertical scrolling only!</p>
</div>
</perfect-scrollbar>
</template>#### 🔹 Available Options:
– `suppressScrollX: true` → Disable horizontal scrolling.
– `suppressScrollY: true` → Disable vertical scrolling.
– `wheelSpeed: 2` → Adjusts scroll speed.
For more options, check the [Perfect Scrollbar documentation](https://github.com/mdbootstrap/perfect-scrollbar#options).
—
## ✅ Example with Dynamic Content:
<script setup>
import { ref } from "vue";
import { PerfectScrollbar } from "vue3-perfect-scrollbar";
const items = ref(Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`));
</script>
<template>
<perfect-scrollbar style="max-height: 200px; overflow: auto;">
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</perfect-scrollbar>
</template>—
## 🎯 Why Use `vue3-perfect-scrollbar`?
✔️ Smooth scrolling experience
✔️ Easy integration with Vue 3
✔️ Customizable scrollbar behavior
✔️ Lightweight & performant
Let me know if you need further customization! 🚀
—
## ✅ **Step 1: Install ApexCharts**
Since `vue3-apexcharts` is a wrapper around `apexcharts`, you need to install both:
npm install apexcharts vue3-apexcharts
# or
yarn add apexcharts vue3-apexchartsIf you already installed it but still see the error, try reinstalling:
rm -rf node_modules package-lock.json yarn.lock
npm install
# or
yarn install—
## ✅ **Step 2: Import Correctly**
Ensure you are correctly importing and using the component. Example:
<script setup>
import VueApexCharts from "vue3-apexcharts";
</script>
<template>
<VueApexCharts
type="line"
:options="chartOptions"
:series="series"
height="300"
/>
</template>
<script>
export default {
data() {
return {
chartOptions: {
chart: { id: "vuechart-example" },
xaxis: { categories: [1991, 1992, 1993, 1994] },
},
series: [{ name: "series-1", data: [30, 40, 45, 50] }],
};
},
};
</script>—
## ✅ **Step 3: Add ApexCharts Globally (Optional)**
If you're using ApexCharts in multiple places, register it globally in `main.js`:
import { createApp } from "vue";
import App from "./App.vue";
import VueApexCharts from "vue3-apexcharts";
const app = createApp(App);
app.component("apexchart", VueApexCharts);
app.mount("#app");Then, use it anywhere:
<apexchart :options="chartOptions" :series="series"></apexchart>—
## ✅ **Step 4: Check for Import Issues**
If you are using **Vite**, ensure that your `vite.config.js` allows CommonJS modules:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
optimizeDeps: {
include: ["apexcharts"],
},
});—
## ✅ **Step 5: Restart Dev Server**
Sometimes, a restart is required after installing dependencies:
npm run dev
# or
yarn devIf you're still facing the issue, let me know your setup (Vite, Webpack, etc.) so I can assist further! 🚀