### Install Dependencies and Start Dev Server (pnpm)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/installation

Commands to install all project dependencies using pnpm and then start the development server. This is a standard step after initial setup or pulling changes. Assumes pnpm is installed and available in the environment.

```bash
# It will install all packages
pnpm install

# Will start the dev server
pnpm run dev
```

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

### Run Development Server

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/installation

Starts the development server for local testing. This command automatically rebuilds the application when changes are detected in the source files.

```shell
pnpm run dev
```

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

### Serve Application (Custom Port)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/installation

Starts a local development server on a specified port. This is useful if the default port 8000 is already in use or if you prefer a different port.

```shell
php artisan serve --port=8080
sudo php artisan serve --port=80
```

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

### Serve Application (Default Port)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/installation

Starts a local development server to serve the application, typically on port 8000. Navigate to the provided address in your browser to view the running application.

```shell
php artisan serve
```

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

### Copy Environment File

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/installation

Copies the example environment configuration file to a new file named '.env'. This file is used to store environment-specific settings for the application.

```shell
cp .env.example .env
```

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

### Install Node.js Dependencies

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/installation

Installs all project dependencies listed in the package.json file using pnpm. This command is essential for running the development server and building the project.

```shell
pnpm install
```

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

### Install Composer Packages

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/installation

Installs the necessary PHP packages for the project using Composer. Ensure Composer is installed and accessible in your system's PATH.

```shell
composer install
```

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

### Install Laravel Sanctum

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sanctum-integration

Installs Laravel Sanctum using the Artisan command. This is the initial step for enabling API authentication.

```bash
php artisan install:api
```

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

### Configure SQLite Database Connection

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/database-connection

This example demonstrates how to update the `.env` file to establish a connection with a SQLite database. It involves changing the `DB_CONNECTION` to `sqlite` and specifying the `DB_DATABASE` path.

```properties
DB_CONNECTION=sqlite
DB_DATABASE=/path_to_your_project/database/database.sqlite
```

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

### Install Node.js Dependencies

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

Installs frontend dependencies using Yarn. This command fetches all necessary packages and places them in the 'node_modules' folder, making them available for project development.

```shell
sail yarn
```

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

### Install Iconify Library (pnpm)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/icons

This command installs a specific icon library from the Iconify collection. Replace 'library-name' with the desired icon set's prefix. For example, '@iconify-json/tabler' installs the Tabler Icons library.

```sh
pnpm install @iconify-json/library-name

# For Example

pnpm install @iconify-json/tabler
```

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

### Configure PostgreSQL Database Connection

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/database-connection

This example shows how to update the `.env` file for a PostgreSQL database connection. It includes setting `DB_CONNECTION` to `pgsql` and providing the correct host, port, database name, username, and password.

```properties
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=password
```

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

### Environment Variables Configuration (.env)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/installation

Example configurations for .env files for Vue and Nuxt projects. These variables are essential for application functionality, particularly for API integrations and authentication. It outlines specific keys like `VITE_MAPBOX_ACCESS_TOKEN`, `AUTH_ORIGIN`, `AUTH_SECRET`, and `NUXT_PUBLIC_API_BASE_URL`.

```env
VITE_MAPBOX_ACCESS_TOKEN=mapbox_access_token
```

```env
AUTH_ORIGIN=http://localhost:3000/api/auth
AUTH_SECRET=7af82237c4ac5d172db8c53816139f2bf25236231130898bfebe65dace465d5e
NUXT_PUBLIC_API_BASE_URL=http://localhost:3000/api
NUXT_APP_BASE_URL=
MAPBOX_ACCESS_TOKEN=mapbox_access_token
```

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

### Preview Production Build (npm)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/installation

Command to preview the generated production build locally using npm. This allows testing the optimized application before deploying it to a live environment. It serves the application on a local development server.

```bash
npm run preview
```

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

### Build for Production

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/installation

Builds and bundles the application's assets for deployment to production. This command optimizes the code and assets for performance.

```shell
pnpm run build
```

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

### Create SQLite Database File

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/database-connection

This snippet shows how to create a SQLite database file using the `touch` command. It's a prerequisite for configuring SQLite as the database connection.

```bash
#create database
touch database/database.sqlite
```

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

### Preview Nuxt Production Build (Node.js)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/installation

Command to preview a standard Nuxt application build. It directly executes the server entry point. This is used for previewing the production build of Nuxt projects, including the starter-kit.

```bash
node .output/server/index.mjs
```

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

### Start Sail Development Server

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

Starts the Sail development server. This includes creating a 'sail' alias for convenience and then running the 'sail up' command to launch the Docker services defined in the project. Assumes 'sail' script is available or uses the vendor binary.

```shell
alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'  //created alias

sail up
```

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

### Check Node.js Version (Bash)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/installation

Command to verify the installed Node.js version. Ensures that the required LTS version is active for template compatibility. No specific inputs or outputs are detailed beyond the version check itself.

```bash
node -v
```

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

### Create PostgreSQL User and Database

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/database-connection

These snippets outline the bash commands to create a PostgreSQL user and set its password, followed by creating a new database. These are necessary initial steps before configuring PostgreSQL connection in the `.env` file.

```bash
$ sudo -u postgres createuser --interactive
enter name of role to add: laravel
shall the new role be a superuser (y/n) n
shall the new role be allowed to create database (y/n) n
shall the new role be allowed to create more new roles (y/n) n
```

```bash
$ sudo -u postgres psql
postgres= ALTER USER laravel WITH ENCRYPTED PASSWORD 'password';
postgres= \q
```

```bash
sudo -u postgres createdb laravel
```

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

### Preview Nuxt Production Build with Environment Variables (Node.js)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/installation

Command to preview the full version of the Nuxt template build, requiring specific environment variables to be set. It directly executes the server entry point with authentication-related variables. Ensure `AUTH_SECRET` and `AUTH_ORIGIN` are configured correctly.

```bash
# ❗ Assuming preview will be on localhost:3000
AUTH_SECRET=YOUR_SECRET AUTH_ORIGIN=http://localhost:3000 node .output/server/index.mjs
```

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

### Start Laravel Sail Docker Containers

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

Starts all the Docker containers defined in the `docker-compose.yml` file for your Laravel project. This command brings up the development environment, making your application accessible.

```sh
./vendor/bin/sail up
```

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

### Install Passport Keys and Clients

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-integration

Generates encryption keys for secure token generation and creates default OAuth2 clients (personal access and password grant). This command is essential for Passport to function correctly.

```bash
php artisan passport:install
```

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

### Preview Production Build (pnpm)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/installation

Command to preview the generated production build locally using pnpm. This allows testing the optimized application before deploying it to a live environment. It serves the application on a local development server.

```bash
pnpm preview
```

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

### Install Laravel Passport

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-integration

Installs the Laravel Passport package using Composer. This is the first step to enable OAuth2 server capabilities in your Laravel application.

```bash
composer require laravel/passport
```

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

### Install and Use Layouts Plugin (TypeScript)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/layouts

Demonstrates how to create a plugin file for the layouts plugin and import it into the main application file using TypeScript. This setup enables the core layout functionalities provided by the template.

```ts
import { createLayouts } from '@layouts'
import '@layouts/styles/index.scss'
import { layoutConfig } from '@layouts'

// ℹ️ We generate layout config from our themeConfig so you don't have to write config twice
export default createLayouts(layoutConfig)
```

```ts
import layoutsPlugin from '@/plugins/layouts'
import { createApp } from 'vue'
import App from '@/App.vue'

const app = createApp(App)
app.use(layoutsPlugin)
```

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

### Generate Application Key

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/installation

Generates a unique application key for security purposes and sets it in the .env file. This command is crucial for Laravel applications.

```shell
php artisan key:generate
```

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

### Configure MySQL Database Connection

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/database-connection

This snippet illustrates the configuration for a MySQL database connection within the `.env` file. It sets the `DB_CONNECTION` to `mysql` and specifies the host, port, database name, username, and password.

```properties
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
```

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

### Generate Production Build (pnpm)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/installation

Command to generate a production-ready build of the application using pnpm. This process optimizes assets and bundles the code for deployment. It's a prerequisite for previewing the production version locally.

```bash
pnpm build
```

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

### Run Database Migrations for Sanctum

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sanctum-integration

Executes database migrations to create the necessary table for storing API tokens. This command should be run after Sanctum is installed and configured.

```bash
php artisan migrate
```

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

### Run Icon Build Command

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/icons

Execute the command to build the icon bundle after configuring sources and target. This command should be run from the project's root directory where `package.json` is located. Examples for PNPM and NPM are provided.

```bash
pnpm run build:icons
```

```bash
npm run build:icons
```

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

### Install Passport with UUID Client Support

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-integration

Installs Laravel Passport while configuring it to use UUIDs as the primary key for the Passport Client model instead of auto-incrementing integers. Requires additional steps for disabling default migrations.

```bash
php artisan passport:install --uuids
```

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

### Showcase Code Snippets with AppCardCode

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/core/components/app-card-code

This snippet demonstrates the usage of the AppCardCode component to display example code. It takes a 'title' prop for the snippet's heading and a 'code' prop, which should be bound to the code content. It also accepts child components to render alongside the code example. Ensure the 'code' prop is correctly bound to your demo code variables.

```vue
<AppCardCode
  title="Basic"
  :code="demoCode.basic"
  >
  <DemoAlertBasic />
</AppCardCode>
```

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

### User Registration API

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-authentication

Registers a new user with provided details. Requires name, email, password, and password confirmation.

```APIDOC
## POST /api/auth/register

### Description
Registers a new user. Validates input for name, email, password, and password confirmation.

### Method
POST

### Endpoint
/api/auth/register

### Parameters
#### Request Body
- **name** (string) - Required - User's name.
- **email** (string) - Required - User's email address (must be unique).
- **password** (string) - Required - User's password.
- **c_password** (string) - Required - Password confirmation, must match the password.

### Request Example
```json
{
  "name": "John Doe",
  "email": "john.doe@example.com",
  "password": "secret",
  "c_password": "secret"
}
```

### Response
#### Success Response (201)
- **message** (string) - Indicates successful user creation.

#### Response Example
```json
{
  "message": "Successfully created user!"
}
```
```

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

### Configure Navbar Shortcuts (TypeScript)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/core/components/navbar-shortcuts

This snippet demonstrates how to define and pass shortcut data to the Navbar Shortcuts component using TypeScript. It includes examples of icons, titles, subtitles, and navigation routes for various applications and pages. This setup is essential for initializing the shortcut links.

```typescript
<script setup lang="ts">
const shortcuts = [
  {
    icon: 'mdi-calendar',
    title: 'Calendar',
    subtitle: 'Appointments',
    to: { name: 'apps-calendar' },
  },
  {
    icon: 'mdi-file-document-outline',
    title: 'Invoice App',
    subtitle: 'Manage Accounts',
    to: { name: 'apps-invoice-list' },
  },
  {
    icon: 'mdi-account-outline',
    title: 'Users',
    subtitle: 'Manage Users',
    to: { name: 'apps-user-list' },
  },
  {
    icon: 'mdi-view-dashboard-outline',
    title: 'Dashboard',
    subtitle: 'Dashboard Analytics',
    to: { name: 'dashboards-analytics' },
  },
  {
    icon: 'mdi-cog-outline',
    title: 'Settings',
    subtitle: 'Account Settings',
    to: { name: 'pages-account-settings-tab', params: { tab: 'account' } },
  },
  {
    icon: 'mdi-help-circle-outline',
    title: 'Help Center',
    subtitle: 'FAQs & Articles',
    to: { name: 'pages-help-center' },
  },
]
</script>

<template>
  <Shortcuts :shortcuts="shortcuts" />
</template>
```

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

### Generate Production Build

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-deployment

Command to generate optimized production-ready build files for a Vue.js application using npm. This command typically bundles, minifies, and optimizes all assets (JavaScript, CSS, images) for deployment.

```bash
npm run build
```

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

### Empty Vertical Navigation (JavaScript)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/navigation-menu

This example shows the structure of the `src/navigation/vertical/index.ts` file when it contains no navigation items. It exports an empty array, serving as a baseline configuration.

```javascript
export default []
```

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

### Get Template Theme Setting

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/articles/what-is-the-system-theme

This snippet illustrates how to access the template's current theme setting using the `configStore`. It retrieves the theme, which can be 'system', 'light', or 'dark'.

```typescript
import { useConfigStore } from '@core/stores/config';

const configStore = useConfigStore();

console.log(configStore.theme); // system/light/dark
```

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

### User Login API

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-authentication

Authenticates a user and returns an access token. Requires email and password.

```APIDOC
## POST /api/auth/login

### Description
Logs in a user and generates an access token. Requires email and password.

### Method
POST

### Endpoint
/api/auth/login

### Parameters
#### Request Body
- **email** (string) - Required - User's email address.
- **password** (string) - Required - User's password.
- **remember_me** (boolean) - Optional - If true, the token will be valid for a week.

### Request Example
```json
{
  "email": "john.doe@example.com",
  "password": "secret",
  "remember_me": true
}
```

### Response
#### Success Response (200)
- **access_token** (string) - The authentication token for the user.
- **token_type** (string) - The type of token, typically 'Bearer'.
- **expires_at** (string) - The expiration date and time of the token.

#### Response Example
```json
{
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
  "token_type": "Bearer",
  "expires_at": "2023-10-27 10:00:00"
}
```
```

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

### Generate Application Key

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

Generates a new application key for the Laravel project using Sail. This command should be run after renaming the '.env.example' file to '.env'. It also allows for editing database credentials in the '.env' file.

```shell
sail php artisan key:generate
```

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

### Install Composer Dependencies with Docker

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

Installs PHP dependencies using Composer within a Docker container. This command mounts the current directory into the container and sets the working directory, ensuring dependencies are installed in the project.

```shell
docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php81-composer:latest \
    composer install --ignore-platform-reqs
```

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

### Get Authenticated User API

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-authentication

Retrieves the details of the currently authenticated user.

```APIDOC
## GET /api/auth/user

### Description
Retrieves the details of the currently authenticated user.

### Method
GET

### Endpoint
/api/auth/user

### Parameters
#### Headers
- **Authorization** (string) - Required - Bearer token (e.g., "Bearer <Your_Access_Token>").
- **Accept** (string) - Required - Should be set to "application/json".

### Response
#### Success Response (200)
- Returns a JSON object containing the user's details.

#### Response Example
```json
{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com",
  "email_verified_at": null,
  "created_at": "2023-10-20T08:00:00.000000Z",
  "updated_at": "2023-10-20T08:00:00.000000Z"
}
```
```

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

### Start Laravel Sail in Detached Mode

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

Starts all the Docker containers for your Laravel project in the background (detached mode). This allows you to continue using your terminal for other tasks while Sail runs your development environment.

```sh
sail up -d
```

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

### Install Sail into Existing Laravel Applications

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

Installs the Laravel Sail package as a development dependency into an existing Laravel application using Composer. This is the first step to integrating Sail with a project that was not initially set up with it.

```sh
composer require laravel/sail --dev
```

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

### No Search Data Suggestion Format

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/articles/how-to-add-search-in-starter-kit

Defines the data structure for displaying suggestions when no search results are found. Each suggestion includes an icon, title, and a URL to navigate to.

```javascript
[
  {
    icon: string
    title: string
    url:  { name: string; params?: object }
  }

  ...
]
```

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

### Update Routing for API

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sanctum-integration

Ensures the API routes file is included in the application's bootstrap process. This is typically handled by the `install:api` command but can be manually added.

```php
return Application::configure(basePath: dirname(__DIR__))
  ->withRouting(
    web: __DIR__ . '/../routes/web.php',
    api: __DIR__ . '/../routes/api.php', // Add this if not added by install:api
    commands: __DIR__ . '/../routes/console.php',
    health: '/up',
  )
```

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

### Publish Sail's Docker Compose File

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

After installing the Sail package, this command publishes the `docker-compose.yml` file to the root of your Laravel application. This file defines the Docker services that Sail will manage.

```sh
php artisan sail:install
```

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

### Default Search Suggestion Data Format

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/articles/how-to-add-search-in-starter-kit

Defines the expected JSON structure for providing default search suggestions to the search component. Each suggestion can have a title and a list of content items, where each content item includes an icon, title, and URL.

```javascript
[
  {
    title:string
    content: [
      icon:string,
      title:string
      url:string
    ]
  }

  ...
]
```

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

### Laravel AuthController: Get Authenticated User API

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-authentication

Retrieves the currently authenticated user's data. This endpoint requires a valid authorization token in the request headers. It returns the user object in JSON format.

```php
  /**
  * Get the authenticated User
  *
  * @return [json] user object
  */
  public function user(Request $request)
  {
    return response()->json($request->user());
  }
```

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

### Search List Data Format

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/articles/how-to-add-search-in-starter-kit

Specifies the data format required for rendering the search results list. It includes an optional header and a list of items, each with an ID, URL, icon, title, and category.

```javascript
[
  { header : string, title : string },    -------> Optional
  {
    id: number
    url: { name:string, params?: object}
    icon: string
    title: string
    category: string
  }

  ...
]
```

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

### Load Vue App - index.html

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/articles/understanding-authentication-and-acl-first-visit-part-1

The entry point for a Vue.js application, typically named index.html. It includes a script tag that points to the main application file (e.g., src/main.ts), which bootstraps the Vue instance and mounts it to the DOM.

```html
<script  type="module"  src="src/main.ts"></script>
```

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

### Run Development Build

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-sail-docker

Compiles project files for development mode using Yarn. This command enables hot module replacement, ensuring that changes are reflected in the browser without a full page reload, and prepares the project for local testing.

```shell
sail yarn dev
```

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

### Simplified API Call with useApi (TypeScript)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/getting-started/data-fetching

Illustrates how to use the custom `useApi` composable to make API calls without repeating the base URL. `useApi` is pre-configured with common settings, simplifying data fetching for endpoints like '/users'.

```typescript
// No need to repeat `https://localhost/api` now
const { data } = await useApi('/users')
```

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

### Clean npm Cache

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/faq

Cleans the npm package cache, which can help resolve installation issues caused by corrupted or outdated cached packages. This is a common troubleshooting step for npm installation problems.

```bash
npm cache clean
```

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

### Clean yarn Cache

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/faq

Cleans the yarn package cache, similar to npm cache clean, this command resolves installation issues by removing corrupted or outdated cached packages. It's a recommended step for troubleshooting yarn installation problems.

```bash
yarn cache clean
```

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

### User Logout API

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-authentication

Logs out the currently authenticated user by revoking their token.

```APIDOC
## GET /api/auth/logout

### Description
Logs out the currently authenticated user by revoking their access token.

### Method
GET

### Endpoint
/api/auth/logout

### Parameters
#### Headers
- **Authorization** (string) - Required - Bearer token (e.g., "Bearer <Your_Access_Token>").

### Response
#### Success Response (200)
- Typically returns a success message indicating logout.

#### Response Example
```json
{
  "message": "Successfully logged out"
}
```
```

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

### Resolve npm Dependency Conflicts

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/faq

This command helps resolve dependency tree conflicts during npm installation by accepting potentially incorrect peer dependency resolutions. It is recommended to use this when facing ERESOLVE errors and after cleaning the npm cache.

```bash
npm install --legacy-peer-deps
```

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

### Logout User API

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-authentication

This endpoint allows a user to log out by revoking their current authentication token.

```APIDOC
## POST /api/auth/logout

### Description
Logs out the current user by revoking their authentication token.

### Method
GET

### Endpoint
http://127.0.0.1:8000/api/auth/logout

### Headers
- **Accept**: application/json
- **Authorization**: Bearer <Token>

### Request Body
None

### Response
#### Success Response (200)
- **message** (string) - A message indicating successful logout.

#### Response Example
```json
{
  "message": "Successfully logged out"
}
```
```

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

### App Mounts and Router Navigation - src/main.ts

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/articles/understanding-authentication-and-acl-first-visit-part-1

The final step in the application's initialization process where the Vue application instance is mounted to the DOM element with the ID 'app'. After mounting, Vue Router begins its navigation process, triggering route guards.

```typescript
// file: src/main.ts

app.mount('#app')
```

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

### Initialize CASL Plugin in main.ts

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/articles/how-to-add-acl-in-starter-kit

This snippet shows how to import and use the CASL abilities plugin in your Vue application's main entry point (`main.ts`). It enables global property access for ACL functionalities. Ensure `@/plugins/casl/ability.ts` is configured appropriately.

```typescript
import ability from '@/plugins/casl/ability'
import { abilitiesPlugin } from '@casl/vue'

// other code

app.use(abilitiesPlugin, ability, {
  useGlobalProperties: true,
})
```

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

### Get Initial Loader Background Color from Local Storage (TypeScript)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/splash-screen

This code snippet demonstrates how to retrieve the initial loader background color from local storage. The key used is constructed using the application's title, appended with '-initial-loader-bg'. This allows for theme synchronization between the splash screen and the Vue application.

```typescript
const loaderColor = localStorage.getItem('TemplateName-initial-loader-bg') 
const loaderColor = localStorage.getItem('SalesMax-initial-loader-bg')
```

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

### Standard API Call without Base URL (TypeScript)

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/getting-started/data-fetching

Demonstrates a standard API call using `useFetch` where the full base URL must be explicitly provided for each request. This approach can lead to repetition, especially when making multiple API calls.

```typescript
const { data } = await useFetch('https://localhost/api/users')
```

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

### Generate Passport Keys for Deployment

Source: https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/laravel-integration/laravel-passport-integration

Generates the necessary encryption keys for Passport when deploying to production servers. These keys are typically not stored in source control.

```bash
php artisan passport:keys
```