@exlinelabs/exlinecore-vue

Vue 3 component library for the ExlineCore admin panel framework. Includes pre-built auth views, an admin shell, a users management view, 20+ UI components, and composables for auth, forms, toasts, and pagination.

Requirements

• Vue 3.4 or later
• vue-router 4.3 or later
• pinia 2.2 or later

Installation

npm install @exlinelabs/exlinecore-vue vue@^3.4 vue-router@^4.3 pinia@^2.2

Quick setup

1. Import the stylesheet in main.ts

import '@exlinelabs/exlinecore-vue/style.css'

2. Mount Pinia and the router

useAuth uses Pinia internally. Pinia must be mounted before the router so the route guard can access auth state.

import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())  // must come before app.use(router)
app.use(router)
app.mount('#app')

3. Mount the toast outlet in App.vue

<template>
  <DashToast />
  <RouterView />
</template>

4. Set up the route guard

import { useAuth } from '@exlinelabs/exlinecore-vue'

router.beforeEach((to) => {
  const { isAuthenticated } = useAuth()
  if (!to.meta.public && !isAuthenticated.value) return '/login'
})

4. Wrap authenticated pages in DashShell

DashShell is a pure layout shell with no props. Pass DashSidebar into the #sidebar slot:

<DashShell>
  <template #sidebar>
    <DashSidebar
      :active-nav="route.path.slice(1)"
      :collapsed="sidebarCollapsed"
      :nav-items="navItems"
      :username="user?.email?.split('@')[0]"
      :role="user?.role"
      @nav-click="(key) => router.push(`/${key}`)"
      @update:collapsed="sidebarCollapsed = $event"
      @profile-click="router.push('/settings')"
      @sign-out="handleSignOut"
    />
  </template>
  <RouterView />
</DashShell>

Pre-built views

| View | What it renders | |---|---| | DashLoginView | Login form with email and password | | DashRegisterView | Registration form | | DashForgotPasswordView | Forgot password form | | DashResetPasswordView | Reset password form (takes a token prop) | | DashUsersView | Full users management table with create, edit, delete | | DashDashboardView | Stats overview with a recent users table | | DashSettingsView | Account details and change password form |

Components

| Category | Components | |---|---| | Inputs | DashButton, DashIconButton, DashInput, DashSelect, DashCheckbox, DashRadio, DashToggle | | Display | DashBadge, DashAlert, DashCard, DashStat | | Data | DashTable, DashPagination | | Feedback | DashToast, DashModal, DashDropdownMenu | | Layout | DashShell, DashSidebar, DashPageHeader, DashAuthLayout | | Primitives | DashAvatar, DashText, DashDivider |

Composables

| Composable | What it does | |---|---| | useAuth | JWT auth state, login, logout, token refresh | | useToast | Global toast notifications | | useForm | Form values, validation errors, submit loading state | | useUsers | Fetch and mutate users via the REST API | | usePagination | Client-side pagination for any list |

Documentation

Full documentation at github.com/Exline-Labs/exline-core.

• Getting started
• Authentication
• Layout
• Components
• Composables
• Extending