Pinx Admin Template

https://pinx-docs.vercel.app
Admin
Pinx Admin Template provides a practical guide to installing, building, and customizing a...
Tokens:20,555
Snippets:67
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Configuration File Examples

Source: https://pinx-docs.vercel.app/updates

Examples of configuration files that may need updating during the Pinx project update process. These include settings for build tools, linters, formatters, and styling.

```javascript
// tailwind.config.js
// vite.config.js
// tsconfig.json
// .prettierrc.json
// design-tokens.js
// vitest.config.js
```

```javascript
// nuxt.config.js (if applicable)
```

```javascript
// cypress.config.ts
```

```javascript
// eslint.config.mjs
```

--------------------------------

### Run Development Server

Source: https://pinx-docs.vercel.app/updates

Starts the application in development mode for testing. This command is typically run using npm.

```bash
npm run dev
```

--------------------------------

### Install Bun

Source: https://pinx-docs.vercel.app/bun

This snippet shows the command to install the Bun runtime using curl.

```bash
curl -fsSL https://bun.sh/install | bash
```

--------------------------------

### Install Dependencies (npm, yarn, pnpm)

Source: https://pinx-docs.vercel.app/installation

This snippet shows the commands to install project dependencies using different package managers (npm, yarn, pnpm). These commands install all necessary packages listed in the package.json file into the local node_modules directory.

```bash
# npm
npminstall
```

```bash
# yarn
yarninstall
```

```bash
# pnpm
pnpminstall
```

--------------------------------

### Run Vue Project with Bun

Source: https://pinx-docs.vercel.app/bun

Provides commands to start the development server, build for production, and preview the built application using Bun.

```shell
# start the development
bun run dev
# build for production
bun run build
# start preview
bun run preview
```

--------------------------------

### Install naive-ui Globally (Not Recommended)

Source: https://pinx-docs.vercel.app/components

Shows how to install the entire naive-ui library globally for a Vue.js application. This method is generally not recommended due to potential impacts on bundle size.

```javascript
import { createApp } from"vue"
import naive from"naive-ui"
constapp=createApp(App)
app.use(naive)
```

--------------------------------

### Create Production Build

Source: https://pinx-docs.vercel.app/updates

Generates an optimized build of the project for deployment. This command is typically run using npm.

```bash
npm run build
```

--------------------------------

### Update Dependencies

Source: https://pinx-docs.vercel.app/updates

Commands to install or update project dependencies using npm, yarn, or pnpm. This ensures the project uses the correct versions of its libraries.

```bash
# npm
npm install
# yarn
yarn install
# pnpm
pnpm install
```

--------------------------------

### Run ESLint and Prettier

Source: https://pinx-docs.vercel.app/updates

Commands to run ESLint for code analysis and Prettier for code formatting. These commands help maintain code quality and consistency.

```bash
npm run lint && npm run format
```

--------------------------------

### Clone Pinx Repository

Source: https://pinx-docs.vercel.app/updates

Command to clone the Pinx repository from a Git URL. This is used to download the latest version of the Pinx template.

```git
git clone [repository-URL]
```

--------------------------------

### Project Structure Components

Source: https://pinx-docs.vercel.app/updates

Illustrative paths for components that might require updates, including layout-related components and functional/application-specific components.

```javascript
// app-layouts/
// components/
```

--------------------------------

### Create New Page Component

Source: https://pinx-docs.vercel.app/new-page

Example of a basic Vue component for a new page. It requires a single root element for smooth transitions.

```vue
<!-- 
    src/views/NewPage.vue 
-->
<template>
    <divclass="page">
        <h1>New page</h1>
    </div>
</template>
```

--------------------------------

### Language Configuration Example

Source: https://pinx-docs.vercel.app/i18n

This snippet shows an example of how to define translations for multiple languages (English, Spanish, German, Japanese, French) in a configuration file. It maps language codes to specific phrases, like 'Dashboard'.

```javascript
export default {
    en: {
        dashboard: "Dashboard"
    },
    es: {
        dashboard: "Tablero"
    },
    de: {
        dashboard: "Instrumententafel"
    },
    ja: {
        dashboard: "ダッシュボード"
    },
    fr: {
        dashboard: "Générateur de mise"
    }
}
```

--------------------------------

### Synchronizing Design Tokens with Figma

Source: https://pinx-docs.vercel.app/customization

This snippet outlines the usage of `scripts/tokens-tool.js` for synchronizing design tokens between Figma and Pinx. It covers scenarios where customization starts in Figma or directly in the `design-tokens.json` file.

```bash
# Usage of scripts/tokens-tool.js

# Scenario 1: Customizing from Figma
# 1. Generate figma-tokens.json from Figma.
# 2. Run the script to update design-tokens.json:
node scripts/tokens-tool.js --from-figma

# Scenario 2: Modifying design-tokens.json directly
# 1. Edit design-tokens.json.
# 2. Run the script to update figma-tokens.json:
node scripts/tokens-tool.js --to-figma

# The script ensures consistency between the two files.
```

```javascript
// Example structure of scripts/tokens-tool.js (simplified)
const fs = require('fs');
const path = require('path');

function syncTokens(options) {
  if (options.fromFigma) {
    const figmaTokensPath = path.join(__dirname, 'figma-tokens.json');
    const pinxTokensPath = path.join(__dirname, 'design-tokens.json');

    if (fs.existsSync(figmaTokensPath)) {
      const figmaData = JSON.parse(fs.readFileSync(figmaTokensPath, 'utf8'));
      // Logic to transform figmaData into pinxTokens format
      const pinxData = transformFigmaToPinx(figmaData);
      fs.writeFileSync(pinxTokensPath, JSON.stringify(pinxData, null, 2));
      console.log('design-tokens.json updated from figma-tokens.json');
    } else {
      console.error('figma-tokens.json not found.');
    }
  } else if (options.toFigma) {
    const pinxTokensPath = path.join(__dirname, 'design-tokens.json');
    const figmaTokensPath = path.join(__dirname, 'figma-tokens.json');

    if (fs.existsSync(pinxTokensPath)) {
      const pinxData = JSON.parse(fs.readFileSync(pinxTokensPath, 'utf8'));
      // Logic to transform pinxData into figmaTokens format
      const figmaData = transformPinxToFigma(pinxData);
      fs.writeFileSync(figmaTokensPath, JSON.stringify(figmaData, null, 2));
      console.log('figma-tokens.json updated from design-tokens.json');
    } else {
      console.error('design-tokens.json not found.');
    }
  }
}

function transformFigmaToPinx(figmaData) {
  // Placeholder for transformation logic
  return {
    colors: figmaData.colors,
    typography: figmaData.typography,
    // ... other transformations
  };
}

function transformPinxToFigma(pinxData) {
  // Placeholder for transformation logic
  return {
    colors: pinxData.colors,
    typography: pinxData.typography,
    // ... other transformations
  };
}

// Basic argument parsing
const args = process.argv.slice(2);
const options = {};
if (args.includes('--from-figma')) options.fromFigma = true;
if (args.includes('--to-figma')) options.toFigma = true;

syncTokens(options);

```

--------------------------------

### i18n Store Usage

Source: https://pinx-docs.vercel.app/i18n

This example demonstrates how to interact with the i18n store to manage language settings. It shows how to access the list of available locales, get the current locale, and set a new locale. The selected language is persisted across sessions.

```javascript
import { useLocalesStore } from"@/stores/i18n"
const localesStore=useLocalesStore()
// the whole list of available languages
constavailableLocales=computed(() => localesStore.availableLocales)
// get the current language
constcurrentLocale=computed(() => localesStore.locale)
// set the language with one of the available options
localesStore.setLocale(locale)
```

--------------------------------

### Nuxt Directory Structure for Routing

Source: https://pinx-docs.vercel.app/new-page

Example of how to organize Vue components in the `pages/` directory to define routes in Nuxt.js. This structure supports static, dynamic, and nested routes.

```plaintext
pages/
--| about.vue
--| index.vue
--| posts/
----| [id].vue
```

--------------------------------

### Route Configuration with Authentication and Roles

Source: https://pinx-docs.vercel.app/authentication

Illustrates how to configure routes in a Vue application with authentication requirements and role-based access control. It shows examples of making routes accessible to all authenticated users, specific roles, or redirecting unauthenticated users.

```javascript
const routes= [
    {
        path: "/profile",
        name: "profile",
        component: () =>import("@/views/Profile.vue"),
        meta: { title: "Profile", auth: true, roles: "all" } // all roles can access
    },
    {
        path: "/protected-data",
        name: "protected-data",
        component: () =>import("@/views/ProtectedData.vue"),
        meta: { title: "Protected Data", auth: true, roles: ["admin", "manager"] } // only admin and manager can access
    },
    {
        path: "/guest-page",
        name: "guest-page",
        component: () =>import("@/views/GuestPage.vue"),
        meta: { title: "Guest Page", checkAuth: true, authRedirect: "/profile" } // By setting the "checkAuth" parameter to "true", you can verify whether the user is logged in, and if that is the case, perform a redirect to the "authRedirect" URL.
// By default, "authRedirect" is set to "/"
    }
]
```

--------------------------------

### SCSS Assets Path

Source: https://pinx-docs.vercel.app/updates

Indicates the directory for SCSS files that may need updates to align with new styling specifications and design tokens.

```scss
/* assets/scss/ */
```

--------------------------------

### Import naive-ui Button on Demand

Source: https://pinx-docs.vercel.app/components

Demonstrates how to import and use the NButton component from naive-ui in a Vue.js application using the script setup syntax. This method is recommended for tree shaking.

```vue
<template>
    <n-button>naive-ui</n-button>
</template>
<script setup>
import { NButton } from"naive-ui"
</script>
```

--------------------------------

### Theme Store and CSS Variables Location

Source: https://pinx-docs.vercel.app/colors

Highlights the relocation of default parameters and global CSS variables from `stores/theme.ts` to `theme/index.ts` starting from version 1.14.0. This centralizes theme management.

```typescript
// theme/index.ts
// Contains default parameters and global CSS variables.
// Previously located in stores/theme.ts before v1.14.0.
```

--------------------------------

### Provider.vue Component Role

Source: https://pinx-docs.vercel.app/colors

Explains the updated responsibilities of the `Provider.vue` component in `app-layouts/common/` starting from version 1.14.0. It now focuses on initializing the theme store and applying styles, delegating CSS variable management.

```vue
// app-layouts/common/Provider.vue
// Initializes the theme store and applies generated styles.
// No longer responsible for adding CSS variables to the HTML tag.
```

--------------------------------

### Script Translation Usage

Source: https://pinx-docs.vercel.app/i18n

This example shows how to access translations within a Vue script setup block using the 'useI18n' composable. It retrieves the translation for the 'dashboard' key and stores it in a variable.

```javascript
<script lang="ts" setup>
import { useI18n } from"vue-i18n"
const { t } =useI18n()
consttranslation=t("dashboard")
</script>
```

--------------------------------

### Run Nuxt Project with Bun

Source: https://pinx-docs.vercel.app/bun

Demonstrates how to use Bun to run Nuxt development, build, generate static sites, serve static sites, and preview the application. It involves prefixing commands with `bun --bun run` or `bunx`.

```shell
# start the development
bun --bun run dev
# build for production
bun --bun run build
# start build preview
bun .output/server/index.mjs
# generate static site
bun --bun run generate
# serve static site
bunx serve .output/public
# start preview
bun run preview
```

--------------------------------

### Run Development Server

Source: https://pinx-docs.vercel.app/development

Launches the Pinx project in development mode. The accessible address depends on whether it's a Vue or Nuxt project.

```bash
npm rundev
```

--------------------------------

### Naive UI Theme Configuration and Implementation

Source: https://pinx-docs.vercel.app/naive-ui

This snippet illustrates how Naive UI's theme is configured and applied within the Pinx template. It references files responsible for theme parameter definition and the actual application of these themes to components.

```typescript
/* stores/theme.ts and theme/index.ts */
// These files contain parameters that influence the configuration of the Naive UI theme.
// They control aspects such as colors, sizes, and other visual properties of the components.

// Example (conceptual):
// export const themeConfig = {
//   colors: {
//     primary: '#409eff',
//     secondary: '#67c23a'
//   },
//   sizes: {
//     borderRadius: '4px'
//   }
// };

```

```vue
/* app-layouts/common/Provider.vue */
// This file contains the actual implementation of the Naive UI theme.
// It applies the theme parameters defined in the theme.ts file to all Naive UI components.

// Example (conceptual):
// <template>
//   <n-config-provider :theme-overrides="themeConfig">
//     <slot></slot>
//   </n-config-provider>
// </template>
//
// <script setup>
// import { NConfigProvider } from 'naive-ui';
// import { themeConfig } from '@/stores/theme'; // Assuming themeConfig is imported
// </script>

```

--------------------------------

### Run End-to-End Tests with Cypress

Source: https://pinx-docs.vercel.app/development

Executes end-to-end tests using Cypress. Includes commands for both build and preview modes.

```bash
npm run build
npm run test:e2e
# or `npm run test:e2e:dev` for preview mode
```

--------------------------------

### Run Unit Tests with Vitest

Source: https://pinx-docs.vercel.app/development

Executes unit tests for the project using the Vitest testing framework.

```bash
npm run test:unit
```

--------------------------------

### Project Dependencies List

Source: https://pinx-docs.vercel.app/credits

This section details the external libraries and packages utilized by the project. It includes the package name, author (if specified), and a link to its source repository. This information is crucial for understanding the project's ecosystem and for potential contributions or debugging.

```text
clack/prompts (Nate Moore • <https://github.com/natemoo-re/clack>)
faker-js/faker (<https://github.com/faker-js/faker>)
fawmi/vue-google-maps (<https://github.com/fawmi/vue-google-maps>)
fullcalendar/core (Adam Shaw • <https://github.com/fullcalendar/fullcalendar>)
fullcalendar/daygrid (Adam Shaw • <https://github.com/fullcalendar/fullcalendar>)
fullcalendar/interaction (Adam Shaw • <https://github.com/fullcalendar/fullcalendar>)
fullcalendar/list (Adam Shaw • <https://github.com/fullcalendar/fullcalendar>)
fullcalendar/timegrid (Adam Shaw • <https://github.com/fullcalendar/fullcalendar>)
fullcalendar/vue3 (<https://github.com/fullcalendar/fullcalendar-vue>)
iconify/vue (Vjacheslav Trushkin • <https://github.com/iconify/iconify>)
intlify/shared (kazuya kawaguchi • <https://github.com/intlify/vue-i18n-next>)
intlify/vue-devtools (kazuya kawaguchi • <https://github.com/intlify/vue-i18n-next>)
milkdown/core (<https://github.com/Milkdown/milkdown>)
milkdown/ctx (<https://github.com/Milkdown/milkdown>)
milkdown/preset-commonmark (<https://github.com/Milkdown/milkdown>)
milkdown/prose (<https://github.com/Milkdown/milkdown>)
milkdown/theme-nord (<https://github.com/Milkdown/milkdown>)
milkdown/transformer (<https://github.com/Milkdown/milkdown>)
milkdown/vue (<https://github.com/Milkdown/milkdown>)
nuxt/devtools (<https://github.com/nuxt/devtools>)
nuxtjs/device (Shinji Yamada • <https://github.com/nuxt-modules/device>)
nuxtjs/i18n (<https://github.com/nuxt-community/i18n-module>)
nuxtjs/tailwindcss (<https://github.com/nuxt-modules/tailwindcss>)
pinia-plugin-persistedstate/nuxt (<https://github.com/prazdevs/pinia-plugin-persistedstate.git#main>)
pinia/nuxt (Eduardo San Martin Morote • <https://github.com/vuejs/pinia>)
popperjs/core (Federico Zivolo • <https://github.com/popperjs/popper-core>)
revolist/revogrid-column-numeral (revolist • <https://github.com/revolist/revogrid-column-numeral>)
revolist/revogrid (revolist • <https://github.com/revolist/revogrid>)
revolist/vue3-datagrid (revolist • <https://github.com/revolist/vue3-datagrid>)
rushstack/eslint-patch (<https://github.com/microsoft/rushstack>)
tiptap/extension-character-count (<https://github.com/ueberdosis/tiptap>)
tiptap/extension-highlight (<https://github.com/ueberdosis/tiptap>)
tiptap/extension-link (<https://github.com/ueberdosis/tiptap>)
tiptap/extension-task-item (<https://github.com/ueberdosis/tiptap>)
tiptap/extension-task-list (<https://github.com/ueberdosis/tiptap>)
tiptap/extension-text-align (<https://github.com/ueberdosis/tiptap>)
tiptap/extension-underline (<https://github.com/ueberdosis/tiptap>)
tiptap/pm (<https://github.com/ueberdosis/tiptap>)
tiptap/starter-kit (<https://github.com/ueberdosis/tiptap>)
tiptap/vue-3 (<https://github.com/ueberdosis/tiptap>)
types/fs-extra (<https://github.com/DefinitelyTyped/DefinitelyTyped>)
types/inquirer (<https://github.com/DefinitelyTyped/DefinitelyTyped>)
types/jsdom (<https://github.com/DefinitelyTyped/DefinitelyTyped>)
types/lodash (<https://github.com/DefinitelyTyped/DefinitelyTyped>)
types/node (<https://github.com/DefinitelyTyped/DefinitelyTyped>)
vue-leaflet/vue-leaflet (Nicolò Maria Mezzopera • <https://github.com/vue-leaflet/vue-leaflet>)
vue/eslint-config-prettier (Evan You • <https://github.com/vuejs/eslint-config-prettier>)
vue/eslint-config-typescript (Evan You • <https://github.com/vuejs/eslint-config-typescript>)
vue/test-utils (Lachlan Miller • <https://github.com/vuejs/test-utils>)
vue/tsconfig (Haoqun Jiang • <https://github.com/vuejs/tsconfig>)
vueup/vue-quill (Ahmad Luthfi Masruri • <https://github.com/vueup/vue-quill>)
vueuse/components (Jacob Clevenger • <https://github.com/vueuse/vueuse>)
vueuse/core (Anthony Fu • <https://github.com/vueuse/vueuse>)
apexcharts (<https://github.com/apexcharts/apexcharts.js>)
autoprefixer (Andrey Sitnik • <https://github.com/postcss/autoprefixer>)
chart.js (<https://github.com/chartjs/Chart.js>)
colord (Vlad Shilov • <https://github.com/omgovich/colord>)
cypress (<https://github.com/cypress-io/cypress>)
dayjs (iamkun • <https://github.com/iamkun/dayjs>)
eslint-plugin-cypress (Cypress-io • <https://github.com/cypress-io/eslint-plugin-cypress>)
eslint-plugin-vue (Toru Nagashima • <https://github.com/vuejs/eslint-plugin-vue>)
eslint (Nicholas C. Zakas • <https://github.com/eslint/eslint>)
fs-extra (JP Richardson • <https://github.com/jprichardson/node-fs-extra>)
```

--------------------------------

### Build Production Package

Source: https://pinx-docs.vercel.app/build

Command to create the production-ready package for the Pinx Vue.js Admin Template. This is a standard npm script for building the project.

```bash
npm run build
```

--------------------------------

### Naive UI Theme Overrides and Global CSS Variables

Source: https://pinx-docs.vercel.app/customization

This snippet shows how `store/theme.ts` manages Naive UI theme overrides based on `design-tokens.json`. It also demonstrates the creation of global CSS variables and the implementation of UI logic like RTL support and sidebar collapse.

```typescript
/* store/theme.ts */
import { create } from 'zustand';
import designTokens from '../design-tokens.json'; // Assuming design-tokens.json is imported

interface ThemeState {
  // Naive UI theme overrides based on designTokens
  naiveThemeOverrides: object;
  // Global CSS variables
  cssVariables: Record<string, string>;
  // UI logic states
  isRTL: boolean;
  isSidebarCollapsed: boolean;
  // Methods to update states
  toggleRTL: () => void;
  toggleSidebar: () => void;
}

export const useThemeStore = create<ThemeState>((set) => ({
  naiveThemeOverrides: {
    common: {
      primaryColor: designTokens.colors.primary,
      // ... other theme overrides
    },
  },
  cssVariables: {
    '--primary-color': designTokens.colors.primary,
    '--font-size-base': designTokens.typography.fontSize.base,
    // ... other CSS variables
  },
  isRTL: false,
  isSidebarCollapsed: false,
  toggleRTL: () => set((state) => ({ isRTL: !state.isRTL })),
  toggleSidebar: () => set((state) => ({ isSidebarCollapsed: !state.isSidebarCollapsed })),
}));

// Example of applying CSS variables globally (e.g., in App.vue or main.ts)
// Object.keys(useThemeStore.getState().cssVariables).forEach(key => {
//   document.documentElement.style.setProperty(key, useThemeStore.getState().cssVariables[key]);
// });

```

--------------------------------

### Run Design Tokens Tool CLI

Source: https://pinx-docs.vercel.app/figma

This command executes the design tokens tool, which is part of the Pinx bundle. The tool provides a wizard to import and export design tokens.

```bash
npm run design-tokens
```

--------------------------------

### Libraries (BSD-3-Clause)

Source: https://pinx-docs.vercel.app/credits

This section lists libraries licensed under the BSD-3-Clause license. It includes popular tools for code highlighting, mapping, and rich text editing.

```javascript
highlight.js: https://github.com/highlightjs/highlight.js
maplibre-gl: https://github.com/maplibre/maplibre-gl-js
quill: https://github.com/quilljs/quill
```

--------------------------------

### Pinx Layout and Theme Customization Parameters

Source: https://pinx-docs.vercel.app/layout

This snippet outlines key parameters for customizing the Pinx application's layout and theme. These include layout type, theme name, router transitions, boxed layout, sidebar settings, toolbar height, border radius, and font properties.

```typescript
layout: VerticalNav | HorizontalNav | Blank
themeName: Dark | Light
routerTransition: string // animation for page transitions
boxed: boolean // choose whether to apply a maximum width to the page
sidebar: object // customizations for the behavior and appearance of the sidebar
toolbarHeight: number // height of the toolbar
borderRadius: number // normal border radius used on template components
borderRadiusSmall: number // small border radius used on template components
fontSize: number // font size used on template components
fontFamily: string[] // a set of 3 font-family types shared among template components
```

--------------------------------

### Theme Customization Parameters

Source: https://pinx-docs.vercel.app/customization

This snippet describes the `theme/index.ts` file, which contains customization parameters beyond colors and typography. It allows adjustments to layout type, color palette, router transitions, and other application-wide settings.

```typescript
/* theme/index.ts */

// This file contains remaining customization parameters beyond typography and colors.
// You can adjust aspects like:

export const themeConfig = {
  // Layout type: 'vertical' or 'horizontal'
  layoutType: 'vertical',

  // Color palette: 'dark' or 'light' mode
  colorScheme: 'light',

  // Router transition types (e.g., 'fade', 'slide-left')
  routerTransition: 'fade',

  // Sidebar collapse functionality (example, might be managed by store)
  sidebarCollapsedByDefault: false,

  // Other theme-related settings...
};

// These settings are typically used throughout the application to apply the desired theme and behavior.
// For example, layoutType might determine the main content wrapper's CSS classes.
// colorScheme would toggle between light and dark mode styles.
// routerTransition would be applied to Vue's <router-view> component.

```

--------------------------------

### JavaScript Libraries

Source: https://pinx-docs.vercel.app/credits

This section lists various JavaScript libraries used in the project, including their authors and links to their GitHub repositories. These libraries cover a wide range of functionalities from DOM manipulation to UI components.

```javascript
geojson: https://github.com/caseycesari/geojson.js
jsdom: https://github.com/jsdom/jsdom
json5: https://github.com/json5/json5
lodash: https://github.com/lodash/lodash
mitt: https://github.com/developit/mitt
naive-ui: https://github.com/tusen-ai/naive-ui
npm-run-all: https://github.com/mysticatea/npm-run-all
nuxt-svgo: https://github.com/cpsoinos/nuxt-svgo
nuxt-vitest: https://github.com/danielroe/nuxt-vitest
nuxt: https://github.com/nuxt/nuxt
pinia-plugin-persistedstate: https://github.com/prazdevs/pinia-plugin-persistedstate
pinia: https://github.com/vuejs/pinia
postcss: https://github.com/postcss/postcss
prettier: https://github.com/prettier/prettier
sass: https://github.com/sass/dart-sass
shepherd.js: https://github.com/shipshapecode/shepherd
start-server-and-test: https://github.com/bahmutov/start-server-and-test
tailwind-config-viewer: https://github.com/rogden/tailwind-config-viewer
tailwindcss: https://github.com/tailwindlabs/tailwindcss
ts-node: https://github.com/TypeStrong/ts-node
v-calendar: https://github.com/nathanreyes/v-calendar
vite-svg-loader: https://github.com/jpkleemans/vite-svg-loader
vite: https://github.com/vitejs/vite
vitest-environment-nuxt: https://github.com/danielroe/nuxt-vitest
vitest: https://github.com/vitest-dev/vitest
vue-advanced-cropper: https://github.com/advanced-cropper/vue-advanced-cropper
vue-cal: https://github.com/antoniandre/vue-cal
vue-chartjs: https://github.com/apertureless/vue-chartjs
vue-highlight-words: https://github.com/Astray-git/vue-highlight-words
vue-maplibre-gl: https://github.com/razorness/vue-maplibre-gl
vue-router: https://github.com/vuejs/router
vue-tsc: https://github.com/vuejs/language-tools
vue3-apexcharts: https://github.com/apexcharts/vue3-apexcharts
vue: https://github.com/vuejs/core
vuedraggable: https://github.com/SortableJS/Vue.Draggable
vuevectormap: https://github.com/themustafaomar/vuevectormap
```

--------------------------------

### Pinx Changelog Summary

Source: https://pinx-docs.vercel.app/changelog

This changelog details version updates for Pinx, including component improvements, dependency updates, and new features across different releases.

```markdown
`1.20.0` _2025-05-21_
  
  * **Improved** SegmentedPage component
  * **Improved** Toolbar component
  * **Improved** Breadcrumb component
  * **Updated** Tailwind settings
  * **Updated** to Nuxt 3.17
  * **Updated** Vitest Nuxt configuration
  * **Updated** Dependencies

  

`1.19.0` _2025-03-16_
  
  * **Refactored** i18n Setup
  * **Updated** to Tailwind 4
  * **Updated** to Nuxt 3.16
  * **Updated** Dependencies

  

`1.18.0` _2025-02-15_
  
  * **Improved** Input feedback style
  * **Improved** Design tokens
  * **Improved** Auth pages
  * **Improved** NaiveUI overrides
  * **Refactored** Sidebar component
  * **Refactored** Toolbar component
  * **Updated** Dependencies

  

`1.17.0` _2025-01-15_
  
  * **Improved** PasswordStrengthMeter performance
  * **Improved** Design tokens
  * **Refactored** SegmentedPage component
  * **Refactored** Notifications list
  * **Refactored** AuthForm component
  * **Refactored** Logo component
  * **Refactored** Toolbar Shortcuts button
  * **Updated** Dependencies

  

`1.16.0` _2024-12-02_
  
  * **Added** Password Strength Meter
  * **Improved** Breadcrumb component
  * **Improved** Design tokens
  * **Improved** Tailwind CSS integration
  * **Improved** Main layout
  * **Improved** Auth Pages
  * **Updated** Dependencies
  * **Fixed** Vectormap integration

  

`1.15.0` _2024-11-07_
  
  * **Improved** Design tokens
  * **Improved** Tailwind CSS integration
  * **Updated** Dependencies

  

`1.14.1` _2024-10-10_
  
  * **Updated** App router for Keep-Alive support
  * **Updated** Dependencies
  * **Fix** Icon component

  

`1.14.0` _2024-10-08_
  
  * **Added** naive-ui i18n settings on provider component
  * **Updated** Theme vars/helpers architecture
  * **Updated** Dependencies
  * **Improved** i18n store
  * **Improved** Accessibility
  * **Improved** Segmented page component
  * **Fix** Note masonry layout
  * **Fix** Chat scroll
  * **Fix** image-preview-toolbar size
  * **Refactor** Theme store
  * **Refactor** Assets folders
  * **Removed** Unused components from kit projects

  

`1.13.1` _2024-09-25_
  
  * **Updated** Dependencies
  * **Improved** Nuxt & Vue eslint configurations

  

`1.13.0` _2024-09-15_
  
  * **Updated** Dependencies
  * **Improved** Nuxt eslint configuration

  

`1.12.1` _2024-08-26_
  
  * **Updated** Dependencies

  

`1.12.0` _2024-08-01_
  
  * **Added** Yarn/PNPM resolutions
  * **Fixed** Chat App types
  * **Fixed** Nuxt pages name
  * **Improved** Nitro config
  * **Improved** App Naive-ui Provider component
  * **Improved** Theme store
  * **Updated** Vite config
  * **Updated** Dependencies

  

`1.11.0` _2024-07-18_
  
  * **Added** RTL mode (beta)
  * **Added** LtrContext component
  * **Improved** Components style
  * **Improved** Tailwind CSS implementation
  * **Updated** AppNavbar style
  * **Updated** App Toolbar style
  * **Updated** Design tokens
  * **Updated** Dependencies

  

`1.10.0` _2024-06-26_
  
  * **Added** New PinnedPage v2 component
  * **Improved** PinnedPage v1 component
  * **Improved** Vue full/kit config files
  * **Improved** Nuxt full/kit config files
  * **Improved** Types
  * **Improved** Search bar component
  * **Improved** App header on mobile devices
  * **Updated** eslint to 9.* version
  * **Updated** Theme store ([BREAKING CHANGE](https://pinx-docs.vercel.app/colors))
  * **Updated** Design tokens
  * **Updated** Dependencies
  * **Fixed** Notification view-all button style

  

`1.9.0` _2024-05-30_
  
  * **Improved** PinnedPage component
  * **Improved** Naive-UI integration on Nuxt
  * **Updated** .gitignore file
  * **Updated** HTML lang tag
  * **Updated** Tour component
  * **Updated** nuxt/start-kit configuration
  * **Updated** ImageCropper component
  * **Updated** Dependencies

  

`1.8.0` _2024-04-08_
  
  * **Updated** Breadcrumb
  * **Updated** Dependencies
  * **Updated** Nuxt design tokens tool
  * **Updated** Vite config file
  * **Improved** Figma file
  * **Improved** Theme settings comments
  * **Improved** Layout style
  * **Improved** Starter-kit build size
  * **Improved** Layout switch performance

  

`1.7.0` _2024-02-23_
  
  * **Added** SegmentedPage component
  * **Updated** Apps (Calendar, Email, Chat)
  * **Updated** Layout Base pages (Left/Right Sidebar)
  * **Updated** Auth pages (Login, Register, Forgot Password)
  * **Updated** Dependencies
  * **Improved** Types

  

`1.6.0` _2024-01-10_
  
  * **Added** Dockerfile
  * **Fixed** Stores load
  * **Fixed** Horizontal layout responsiveness
  * **Improved** Types
  * **Updated** Layouts folder name
  * **Updated** Vue version `3.4.x`
  * **Updated** Nuxt version `3.9.x`
  * **Updated** Dependencies

  

`1.5.0` _2023-12-22_
  
  * **Added** Types on global emitter
  * **Added** New CSS helper classes
  * **Added** Global actions listener
  * **Improved** List animations
  * **Improved** Apexchart style
```

--------------------------------

### Nuxt Project Folder Structure

Source: https://pinx-docs.vercel.app/folder-structure

Overview of the standard Nuxt project directory structure and the purpose of each folder within the Pinx project.

```html
Path | Description
---|---
.nuxt/ | Folder generated by Nuxt
.output/ | The built output, run command `npm run build` to create it.
app-layouts/ | This folder contains the layouts that you can use right away in Pinx: `Blank` , `VerticalNav` , `HorizontalNav` .
assets/ | It contains assets like icons, images, fonts, style and every asset that you want the build tool to process.
assets/scss/ overrides/ | This folder contains SCSS files that allow you to override the styles of components that natively do not offer much freedom for customization.
assets/scss/ index.scss | Main style file, imports all scss file used for Pinx layout and components.
components/ | It is where you put all your Vue components which can then be imported inside your pages or other components.
composables/ | Composables folder.
cypress/ | You can put here your e2e test files
directives/ | Directives folder
lang/ | Here you can find all translations and configuration for `i18n`
middleware/ | Nuxt provides a customizable route middleware framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.
pages/ | Nuxt [ page folder ](https://nuxt.com/docs/getting-started/routing#pages) . Just create a new file and new route will be auto generated based on file name
plugins/ | Nuxt automatically reads the files in your plugins directory and loads them at the creation of the Vue application.
public/ | Pure static assets (directly copied)
scripts/ | Design token tool folder
stores/ | Folder contains [`Pinia`](https://pinia.vuejs.org/) stores.
theme/ index.ts | This file contains the default settings regarding the customization of the template.
types/ | You can you this folder to store types used in the application
utils/ | Includes files that provide helper functions for the theme..
app.vue | Nuxt entry component
cypress.config.ts | Cypress configuration file
design-tokens.json | Design tokens file.
error.vue | Nuxt route error component
eslint.config.mjs | ESLint configuration file
figma-tokens.json | Design tokens list for `Figma`
nuxt.config.ts | Nuxt configuration file
pages-extend.ts | Through this file, you can extend the pages generated by Nuxt.
tailwind.config.js | Tailwind configuration file
tsconfig.json | Typescript configuration file
vitest.config.ts | Vitest configuration file
```

--------------------------------

### Configure Vue Project for Bun

Source: https://pinx-docs.vercel.app/bun

Modifies the `package.json` scripts to use Bun for Vue development and build commands. This enables faster execution of Vite commands.

```json
{
  "scripts": {
    "dev": "bunx --bun vite",
    "build-only": "bunx --bun vite build",
    "preview": "bunx --bun vite build && echo '' && bunx --bun vite preview --port 4173 --host",
    "preview-only": "bunx --bun vite preview --port 4173 --host"
  }
}
```

--------------------------------

### Generated Nuxt Router Configuration

Source: https://pinx-docs.vercel.app/new-page

Illustrates the JSON output representing the router configuration generated by Nuxt based on the file structure in the `pages/` directory. This shows the mapping between paths and components.

```json
{
"routes": [
        {
"path": "/about",
"component": "pages/about.vue"
        },
        {
"path": "/",
"component": "pages/index.vue"
        },
        {
"path": "/posts/:id",
"component": "pages/posts/[id].vue"
        }
    ]
}
```

--------------------------------

### Pinx Authentication API Usage

Source: https://pinx-docs.vercel.app/authentication

Demonstrates the usage of Pinx's authentication store for logging in and out users. The `setLogged` function is where custom user data logic should be implemented, and user information is typically stored in local storage.

```javascript
// Login
// inside "setLogged" function you can write your logic and save user data
useAuthStore().setLogged(<USER_INFO>)
// Logout
// this function cleans user data
useAuthStore().setLogout()
```

--------------------------------

### Vite Configuration for Auto-Importing Vue and Naive UI Components

Source: https://pinx-docs.vercel.app/components

This snippet shows how to configure Vite to automatically import Vue, specific Naive UI utilities (useDialog, useMessage, etc.), and components resolved by NaiveUiResolver. It also mentions the inclusion of custom Pinx components from specified directories.

```typescript
import { defineConfig } from"vite"
import vue from"@vitejs/plugin-vue"
import AutoImport from"unplugin-auto-import/vite"
import Components from"unplugin-vue-components/vite"
import { NaiveUiResolver } from"unplugin-vue-components/resolvers"

// https://vitejs.dev/config/
exportdefault defineConfig({
    plugins: [
vue(),
AutoImport({
            imports: [
"vue",
                {
"naive-ui": ["useDialog", "useMessage", "useNotification", "useLoadingBar"]
                }
            ]
        }),
Components({
            resolvers: [NaiveUiResolver()]
        })
    ]
})
```

--------------------------------

### Libraries (Apache-2.0)

Source: https://pinx-docs.vercel.app/credits

This section lists libraries licensed under the Apache-2.0 license, including Microsoft's TypeScript compiler.

```typescript
typescript: https://github.com/Microsoft/TypeScript
```

--------------------------------

### Code Replacements for Theme Store Changes

Source: https://pinx-docs.vercel.app/colors

Instructions for updating code to accommodate changes in the theme store's `style` object, specifically related to CSS variable prefixes. These replacements are necessary after version 1.10.0.

```typescript
A) from: `style['--` to: `style[' `
B) from: `style.value["--` to: `style.value["`
```

--------------------------------

### Generate SSG Application (Nuxt)

Source: https://pinx-docs.vercel.app/build

Command to generate the Static Site Generation (SSG) application within a Nuxt.js project. This command is specific to Nuxt projects and is used for pre-rendering the application.

```bash
npm run generate
```

--------------------------------

### Libraries (ISC)

Source: https://pinx-docs.vercel.app/credits

This section lists libraries licensed under the ISC license, featuring picocolors for terminal string styling.

```javascript
picocolors: https://github.com/alexeyraspopov/picocolors
```

--------------------------------

### Libraries (BSD-2-Clause)

Source: https://pinx-docs.vercel.app/credits

This section lists libraries licensed under the BSD-2-Clause license, specifically highlighting the Leaflet library for interactive maps.

```javascript
leaflet: https://github.com/Leaflet/Leaflet
```

--------------------------------

### Lint with ESLint

Source: https://pinx-docs.vercel.app/development

Performs code linting using ESLint to check for code style and potential errors.

```bash
npm run lint
```
Tokens:
Raw