🌟 Vue 3 HighCharts Tailwind Boilerplate

✨ Powered by Modern Technologies

Vue 3: The versatile powerhouse that makes building dynamic user interfaces a breeze.
Tailwind: A utility-first CSS framework for rapid UI development.
Pinia: Simplified and intuitive state management for Vue 3 applications.
Vite: Lightning-fast build tool that ensures your development experience is as smooth as silk.
i18n: Ready to go with translations, though not yet implemented.

🎥 Demo

vue3-highcharts-tailwind-boilerplate.mp4

🌐 Live Demo

https://vue3-highcharts-tailwind.web.app/

🔑 Credentials

homework@eva.guru
Homeworkeva1**

Component Structure

Skeletons
- ChartSkeleton: Placeholder for charts.
- TableSkeleton: Placeholder for tables.
Chart: The component to display our charts.
GetErrorSuccess
VueTable: Component with pagination and search functionalities.

Layout Structure

The repository includes a structured layout schema that can be easily utilized. To use a new layout, simply specify its name in the router when creating a new route. All handling is managed in the loadLayoutMiddleware.js file.

View Structure

There are two main views in this repository:

Home (Login screen): Entry point of the application.
Dashboard: Displays charts and related tables.

Utility Files

Request: Centralized handling of HTTP requests.
Time: Utility functions for consistent date formatting across the application.

CONSTANTS!

The CONSTANTS.js file defines crucial constants for the application:

// CONSTANTS.js
export default {
  api: {
    login: 'oauth/token',
    me: 'user/user-information',
    sales: {
      dailySalesOverview: 'data/daily-sales-overview',
      skuData: 'data/daily-sales-sku-list',
      skuRefundRates: 'data/get-sku-refund-rate',
    },
  },
  dailySalesOverviewDays: [7, 14, 30, 60],
  defaultCurrency: '$',
  defaultRecordPerPage: 10,
  defaultRecordSize: 30,
  errors: {
    dashboard: { maxComparisonDays: 'You can not compare more than 2 days' },
    noData: 'No data available',
    sales: { errorFetching: 'Error fetching sales' },
    users: { loginError: 'Invalid Credentials', invalidToken: 'Invalid Token' },
  },
  maxComparisonDays: 2,
  routes: { dashboard: '/dashboard' },
}

.env

VITE_OPENAI_API_BASEURL=https://iapitest.eva.guru/

🚀 Features

State Management

Pinia: Simplified and intuitive state management for maintaining the application state.

Efficient Development Workflow

Vite: Fast build tool for an efficient development experience.
Modular Code Structure: Clean and maintainable codebase with Vue 3's Composition API.

🛠️ Setup Instructions

Cloning and Running Locally

To get started, clone the repository and run the development server:

git clone https://github.com/mustafacagri/vue3-highcharts-tailwind-boilerplate.git
cd vue3-highcharts-tailwind-boilerplate
yarn install
yarn dev

The application will be running at http://localhost:5018/. You can redefine the port in the vite.config.js file.

How can I support? 🌟

⭐ Star my GitHub repo.
🛠 Create pull requests, submit bugs, suggest new features or updates.

seniorvuejsdeveloper/vue3-highcharts-tailwind-boilerplate