### Launch Project with npm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/installation

Starts the development server using npm. This command compiles and runs the Next.js application.

```shell
npm run dev
```

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

### Launch Project with yarn

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/installation

Starts the development server using yarn. This command compiles and runs the Next.js application.

```shell
yarn dev
```

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

### File Path Example (TypeScript vs JavaScript)

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started

This snippet demonstrates the difference in file paths for a common component between TypeScript and JavaScript projects within the Vuexy Next.js Admin Template. It's important for JavaScript users to adjust paths accordingly.

```typescript
src/components/Providers.tsx
```

```javascript
src/components/Providers.jsx
```

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

### Launch Project with pnpm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/installation

Starts the development server using pnpm. This command compiles and runs the Next.js application.

```shell
pnpm dev
```

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

### Install cmdk Package using pnpm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/articles/how-to-add-search-in-Starter-Kit

Installs the 'cmdk' package, a dependency for the search functionality, using the pnpm package manager.

```bash
pnpm install cmdk
```

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

### Install cmdk Package using yarn

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/articles/how-to-add-search-in-Starter-Kit

Installs the 'cmdk' package, a dependency for the search functionality, using the yarn package manager.

```bash
yarn add cmdk
```

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

### Install cmdk Package using npm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/articles/how-to-add-search-in-Starter-Kit

Installs the 'cmdk' package, a dependency for the search functionality, using the npm package manager.

```bash
npm install cmdk
```

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

### Install Dependencies with yarn

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/installation

Installs project dependencies using the yarn package manager. An alternative to pnpm.

```shell
yarn install
```

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

### Install Dependencies with npm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/installation

Installs project dependencies using the npm package manager. A standard option for Node.js projects.

```shell
npm install
```

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

### FAQ API Route (TypeScript)

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/development/apps-and-pages-setup/pages

Defines a GET API route for fetching FAQ data. It imports data from a fake database and returns it as a JSON response using Next.js's NextResponse. This is an example of how to create page-specific APIs.

```typescript
import { NextResponse } from 'next/server';
import { db } from '@/app/api/fake-db/pages/faq';

export async function GET() {
  return NextResponse.json(db);
}
```

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

### Install Dependencies with pnpm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/installation

Installs project dependencies using the pnpm package manager. This is the recommended method for Vuexy.

```shell
pnpm install
```

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

### Vuexy Ticket Title Examples

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-support

Provides examples of well-formatted support ticket titles, showcasing how to use different ticket types to clearly state the nature of the inquiry or issue.

```text
[question] How to change theme?
```

```text
[question] How to change i18n locale?
```

```text
[installation] Errors during npm run dev
```

```text
[auth] Unexpected behavior after login
```

```text
[other] Collapse component not working as expected
```

```text
[auth] Redirected to login page post-login on refresh
```

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

### Install Packages with npm, yarn, or pnpm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/faqs/installation-warning

This snippet demonstrates the commands used to install project dependencies using popular package managers like npm, yarn, and pnpm. These commands are essential for setting up the project environment.

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

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

### Install Dependencies with pnpm, yarn, or npm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/faqs/installation-errors

This snippet shows the commands to install project dependencies using different package managers. It's recommended to use 'pnpm' for this template.

```bash
pnpm install
```

```bash
yarn install
```

```bash
npm install
```

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

### Create a Fresh Next.js Project

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/faqs/installation-errors

Command to create a new Next.js project using create-next-app. This is useful for testing if the issue is specific to the Vuexy template or the environment.

```bash
npx create-next-app@latest
```

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

### Render Basic Icon (React)

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/layout/icons

Demonstrates how to render a basic icon using a React component. This example assumes the icon is available in the project's icon set.

```javascript
const Component = () => {
  return <i className='tabler-home' />;
};

export default Component;
```

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

### Vuexy Template Version Specification

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-support

Illustrates how to specify the Vuexy template version and related details when submitting a support ticket. This helps support staff quickly identify the user's setup.

```text
TypeScript + Full Version
```

```text
Javascript + Starter Kit
```

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

### Launch Prisma Studio

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/authentication/google-prisma

Open Prisma Studio to visualize and manage your database content.

```bash
npx prisma studio
```

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

### Standalone Material UI Switch Example (React/Next.js)

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/switch

This snippet demonstrates how to use the Material UI Switch component in a standalone manner. It includes examples of a default checked switch, a default unchecked switch, a disabled switch that is checked, and a disabled unchecked switch. This requires the Material UI library to be installed.

```jsx
import Switch from '@mui/material/Switch';

const SwitchStandalone = () => {
  return (
    <div>
      <Switch defaultChecked />
      <Switch />
      <Switch disabled defaultChecked />
      <Switch disabled />
    </div>
  );
};

export default SwitchStandalone;
```

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

### Control Radio Button Label Placement

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/radio

This example demonstrates how to adjust the placement of the label relative to the radio button using the `labelPlacement` prop of the `FormControlLabel` component. It shows 'top', 'bottom', 'start', and 'end' placements.

```tsx
// MUI Imports 
importRadiofrom'@mui/material/Radio'
importRadioGroupfrom'@mui/material/RadioGroup'
importFormControlfrom'@mui/material/FormControl'
importFormControlLabelfrom'@mui/material/FormControlLabel'

constRadioLabelPlacement=()=>{ 
return(
<FormControl>
<RadioGrouprowaria-label='position'name='vertical'defaultValue='top'>
<FormControlLabelvalue='top'label='Top'labelPlacement='top'className='mie-9'control={<Radio/>}/>
<FormControlLabelvalue='bottom'control={<Radio/>}label='Bottom'labelPlacement='bottom'/>
</RadioGroup>
<RadioGrouprowaria-label='position'name='horizontal'defaultValue='start'className='mbs-4'>
<FormControlLabelvalue='start'label='Start'labelPlacement='start'className='mie-4'control={<Radio/>}/>
<FormControlLabelvalue='end'control={<Radio/>}label='End'/>
</RadioGroup>
</FormControl>
)
}

exportdefaultRadioLabelPlacement
```

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

### Update TextField InputProps to slotProps

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/migration/v3.1.0-to-v4

Provides an example of how to update the TextField component by replacing the deprecated InputProps prop with the new slotProps for handling input-related properties like start adornments.

```javascript
- <TextField InputProps={{ startAdornment: (<InputAdornment position='start'><i className='tabler-search' /></InputAdornment>)}}  />  
  
+
+ <TextField slotProps={{ input: { startAdornment: (<InputAdornment position='start'><i className='tabler-search' /></InputAdornment>)}}} />  
```

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

### Basic List Example

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/components/list

Demonstrates a basic list structure with simple list items. This serves as a foundational example for creating lists.

```jsx
import * as React from 'react';
import ListItem from '@mui/material/ListItem';
import Divider from '@mui/material/Divider';

export default function BasicList() {
  return (
    <>
      <ListItem>Inbox</ListItem>
      <ListItem>Draft</ListItem>
      <Divider />
      <ListItem>Snoozed</ListItem>
      <ListItem>Spam</ListItem>
    </>
  );
}
```

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

### Vuexy Ticket Title Formatting

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-support

This example demonstrates the recommended format for structuring support ticket titles to categorize issues effectively. It includes common ticket types like 'question', 'installation', 'auth', 'acl', 'feat-req', 'bug', and 'other'.

```text
[ticket type] Your question or issue
```

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

### Install NextAuth.js with npm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/authentication/add-auth

Installs the NextAuth.js library using npm, a prerequisite for adding authentication to your starter-kit.

```bash
npminstall next-auth
```

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

### Basic Pagination Example

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/components/pagination

Demonstrates the basic usage of the Pagination component with 'count' for the number of pages and 'color' for styling. This example shows default pagination.

```jsx
import React from 'react'
import Pagination from '@mui/material/Pagination'

function BasicPagination() {
  return (
    <Pagination count={10} />
  )
}

export default BasicPagination
```

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

### Install NextAuth.js with pnpm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/authentication/add-auth

Installs the NextAuth.js library using pnpm, a prerequisite for adding authentication to your starter-kit.

```bash
pnpminstall next-auth
```

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

### Install NextAuth.js with yarn

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/authentication/add-auth

Installs the NextAuth.js library using yarn, a prerequisite for adding authentication to your starter-kit.

```bash
yarnadd next-auth
```

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

### Install Dependencies for Google Auth with Prisma

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/authentication/add-auth

Installs the required dependencies for integrating Google authentication with Prisma Adapter. This includes `@auth/prisma-adapter`, `@prisma/client`, `prisma`, and `dotenv-cli`.

```bash
pnpm install @auth/prisma-adapter @prisma/client prisma dotenv-cli
```

```bash
yarn add @auth/prisma-adapter @prisma/client prisma dotenv-cli
```

```bash
npm install @auth/prisma-adapter @prisma/client prisma dotenv-cli
```

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

### Next.js Deployment Documentation Reference

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/deployment

This snippet references the official Next.js documentation for deployment. It's a pointer to external resources for detailed instructions on deploying Next.js applications across various platforms.

```Markdown
Please visit the Next.js Deployment Documentation for detailed instructions and tips on deploying your Next.js application.
```

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

### Next.js Community Support Resources

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/deployment

This snippet lists community resources for Next.js deployment help. It includes Stack Overflow for Q&A and Next.js GitHub Discussions for community engagement on deployment topics.

```Markdown
* **Stack Overflow** : A large community of developers where you can search for answers or ask specific questions about Next.js deployment.
* **Next.js GitHub Discussions** : Engage with the Next.js community on GitHub for deployment-related queries and discussions.
```

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

### Users List Example

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/components/list

Presents a list of users, including their status (Online, Away, Offline) and last active time. Includes an 'Add' button for each user.

```jsx
import * as React from 'react';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import Divider from '@mui/material/Divider';
import Button from '@mui/material/Button';

export default function UsersList() {
  return (
    <>
      <ListItem>
        <ListItemAvatar>
          <Avatar />
        </ListItemAvatar>
        <ListItemText primary="Caroline Black" secondary="Online" />
        <Button variant="outlined" size="small">Add</Button>
      </ListItem>
      <Divider variant="inset" component="li" />
      <ListItem>
        <ListItemAvatar>
          <Avatar />
        </ListItemAvatar>
        <ListItemText primary="Alfred Copeland" secondary="Away" />
        <Button variant="outlined" size="small">Add</Button>
      </ListItem>
      <Divider variant="inset" component="li" />
      <ListItem>
        <ListItemAvatar>
          <Avatar />
        </ListItemAvatar>
        <ListItemText primary="Celia Schneider" secondary="Offline" />
        <Button variant="outlined" size="small">Add</Button>
      </ListItem>
      <Divider variant="inset" component="li" />
      <ListItem>
        <ListItemAvatar>
          <Avatar />
        </ListItemAvatar>
        <ListItemText primary="Max Rogan" secondary="In Meeting" />
        <Button variant="outlined" size="small">Add</Button>
      </ListItem>
    </>
  );
}
```

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

### Progress List Example

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/components/list

Displays a list of programming languages or technologies, potentially indicating progress or status for each item. This example lists common web development technologies.

```jsx
import * as React from 'react';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';

export default function ProgressList() {
  return (
    <>
      <ListItem>
        <ListItemText primary="React is a JavaScript library for building user interfaces" />
      </ListItem>
      <Divider />
      <ListItem>
        <ListItemText primary="Bootstrap is an open source toolkit" />
      </ListItem>
      <Divider />
      <ListItem>
        <ListItemText primary="Vue.js is the Progressive JavaScript Framework" />
      </ListItem>
      <Divider />
      <ListItem>
        <ListItemText primary="Angular implements Functional Programming concepts" />
      </ListItem>
      <Divider />
      <ListItem>
        <ListItemText primary="JavaScript is the programming language of the Web" />
      </ListItem>
    </>
  );
}
```

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

### Basic RadioGroup Example

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/radio

Demonstrates how to use the RadioGroup component to group Radio buttons, providing a basic API and keyboard accessibility. Includes examples for checked, unchecked, and disabled states.

```javascript
// MUI Imports
import Radio from '@mui/material/Radio'
import RadioGroup from '@mui/material/RadioGroup'
import FormControl from '@mui/material/FormControl'
import FormControlLabel from '@mui/material/FormControlLabel'

const RadioGroupComponent = () => {
  return (
    <FormControl className='flex-wrap flex-row'>
      <RadioGroup row defaultValue='checked' name='basic-radio' aria-label='basic-radio'>
        <FormControlLabel value='checked' control={<Radio />} label='Checked' />
        <FormControlLabel value='unchecked' control={<Radio />} label='Unchecked' />
      </RadioGroup>

      <RadioGroup row value='disabled-checked' name='basic-disabled-radio' aria-label='basic-disabled-radio'>
        <FormControlLabel disabled value='disabled-checked' label='Disabled Checked' control={<Radio />} />
        <FormControlLabel disabled value='disabled-unchecked' label='Disabled Unchecked' control={<Radio />} />
      </RadioGroup>
    </FormControl>
  )
}

export default RadioGroupComponent
```

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

### Controlled and Uncontrolled RadioGroup

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/radio

Illustrates how to manage the state of RadioGroup components. The 'controlled' example uses React's useState hook to manage the selected value, while the 'uncontrolled' example uses the defaultValue prop.

```typescript
// React Imports
import { useState } from 'react'
import type { ChangeEvent } from 'react'

// MUI Imports
import Grid from '@mui/material/Grid2'
import Radio from '@mui/material/Radio'
import Typography from '@mui/material/Typography'
import RadioGroup from '@mui/material/RadioGroup'
import FormControlLabel from '@mui/material/FormControlLabel'

const RadioControlledUncontrolled = () => {
  // States
  const [value, setValue] = useState<string>('controlled-checked')

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value)
  }

  return (
    <Grid container spacing={6}>
      <Grid size={{ xs: 12, sm: 6 }}>
        <Typography color='text.primary'>Controlled</Typography>
        <RadioGroup row aria-label='controlled' name='controlled' value={value} onChange={handleChange}>
          <FormControlLabel value='controlled-checked' control={<Radio />} label='Checked' />
          <FormControlLabel value='controlled-unchecked' control={<Radio />} label='Unchecked' />
        </RadioGroup>
      </Grid>
      <Grid size={{ xs: 12, sm: 6 }}>
        <Typography color='text.primary'>Uncontrolled</Typography>
        <RadioGroup row aria-label='uncontrolled' name='uncontrolled' defaultValue='uncontrolled-checked'>
          <FormControlLabel value='uncontrolled-checked' control={<Radio />} label='Checked' />
          <FormControlLabel value='uncontrolled-unchecked' control={<Radio />} label='Unchecked' />
        </RadioGroup>
      </Grid>
    </Grid>
  )
}

export default RadioControlledUncontrolled
```

```javascript
// React Imports
import { useState } from 'react'

// MUI Imports
import Grid from '@mui/material/Grid2'
import Radio from '@mui/material/Radio'
import Typography from '@mui/material/Typography'
import RadioGroup from '@mui/material/RadioGroup'
import FormControlLabel from '@mui/material/FormControlLabel'

const RadioControlledUncontrolled = () => {
  // States
  const [value, setValue] = useState('controlled-checked')

  const handleChange = event => {
    setValue(event.target.value)
  }

  return (
    <Grid container spacing={6}>
      <Grid size={{ xs: 12, sm: 6 }}>
        <Typography color='text.primary'>Controlled</Typography>
        <RadioGroup row aria-label='controlled' name='controlled' value={value} onChange={handleChange}>
          <FormControlLabel value='controlled-checked' control={<Radio />} label='Checked' />
          <FormControlLabel value='controlled-unchecked' control={<Radio />} label='Unchecked' />
        </RadioGroup>
      </Grid>
      <Grid size={{ xs: 12, sm: 6 }}>
        <Typography color='text.primary'>Uncontrolled</Typography>
        <RadioGroup row aria-label='uncontrolled' name='uncontrolled' defaultValue='uncontrolled-checked'>
          <FormControlLabel value='uncontrolled-checked' control={<Radio />} label='Checked' />
          <FormControlLabel value='uncontrolled-unchecked' control={<Radio />} label='Unchecked' />
        </RadioGroup>
      </Grid>
    </Grid>
  )
}

export default RadioControlledUncontrolled
```

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

### Example Usage of excludeLang Prop in Search Data (JavaScript)

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/migration/v2.0.0-to-v3

This example illustrates how to apply the excludeLang prop to search data items, ensuring that these items are not localized. This provides control over which search results are language-specific.

```javascript
{
  id: '1',
  name: 'Landing Front',
  url: '/front-pages/landing-page',
  excludeLang: true,
  icon: 'ri-article-line',
  section: 'Front Pages'
}
```

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

### Build Icon Bundle with NPM

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/layout/icons

Command to generate the Iconify icon bundle using NPM.

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

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

### Customized Radio Button Example

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/radio

Provides an example of customizing MUI Radio buttons using the `styled` hook. This includes defining custom icons for the default and checked states, and applying styles for different themes and states.

```tsx
// MUI Imports
importRadiofrom'@mui/material/Radio'
import{ styled }from'@mui/material/styles'
importFormLabelfrom'@mui/material/FormLabel'
importRadioGroupfrom'@mui/material/RadioGroup'
importFormControlfrom'@mui/material/FormControl'
importFormControlLabelfrom'@mui/material/FormControlLabel'
importtype{RadioProps}from'@mui/material/Radio'

constBpIcon=styled('span')(({ theme })=>(
{
  width:16,
  height:16,
  borderRadius:'50%',
  backgroundColor:'#f5f8fa',
'input:hover ~ &':{
    backgroundColor:'#ebf1f5',
...theme.applyStyles('dark',{
      backgroundColor:'#30404d'
})
},
'.Mui-focusVisible &':{
    outlineOffset:2,
    outline:'2px auto rgba(19,124,189,.6)'
},
'input:disabled ~ &':{
    boxShadow:'none',
    background:'rgba(206,217,224,.5)',
...theme.applyStyles('dark',{
      background:'rgba(57,75,89,.5)'
})
},
  boxShadow:'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
  backgroundImage:'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
...theme.applyStyles('dark',{
    backgroundColor:'#394b59',
    boxShadow:'0 0 0 1px rgb(16 22 26 / 40%)',
    backgroundImage:'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))'
})
}
))

constBpCheckedIcon=styled(BpIcon)({
  backgroundColor:'#137cbd !important',
  backgroundImage:'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'input:hover ~ &':{
    backgroundColor:'#106ba3 !important'
}
})

// Inspired by blueprints
constBpRadio=(props:RadioProps)=>(
<Radio
{...props}
disableRipple
color='default'
icon={<BpIcon/>}
checkedIcon={<BpCheckedIcon/>}
className='hover:bg-transparent'
/>
)

constRadioCustomized=()=>(
<FormControl>
<FormLabelcomponent='legend'>Gender</FormLabel>
<RadioGrouprowdefaultValue='female'aria-label='gender'name='customized-radios'>
<FormControlLabelvalue='female'control={<BpRadio/>}label='Female'/>
<FormControlLabelvalue='male'control={<BpRadio/>}label='Male'/>
<FormControlLabelvalue='other'control={<BpRadio/>}label='Other'/>
<FormControlLabelvalue='disabled'disabledcontrol={<BpRadio/>}label='Disabled'/>
</RadioGroup>
</FormControl>
)

exportdefaultRadioCustomized
```

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

### Standalone Radio Button Example

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/radio

Demonstrates the usage of individual Radio components without being part of a RadioGroup. This example shows how to manage the checked state of a standalone radio button using React's useState hook.

```typescript
// React Imports
import { useState } from 'react'
import type { ChangeEvent } from 'react'

// MUI Imports
import Radio from '@mui/material/Radio'

const RadioStandalone = () => {
  // States
  const [selectedValue, setSelectedValue] = useState<string>('a')

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value)
  }

  return (
    <div>
      <Radio
        value='a'
        onChange={handleChange}
        name='radio-button-demo'
        checked={selectedValue === 'a'}
        inputProps={{ 'aria-label': 'A' }}
      />
    </div>
  )
}

```

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

### Migrate Database with npm

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/authentication/google-prisma

Execute the database migration using npm to apply schema changes.

```bash
npm run migrate
```

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

### Example Usage of excludeLang Prop in Menu Data (JavaScript)

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/migration/v2.0.0-to-v3

This example shows how to use the excludeLang prop within menu data configuration to prevent specific menu items from being localized. This is useful for URLs that should remain in their original language.

```javascript
{
  label: dictionary['navigation'].landing,
  href: '/front-pages/landing-page',
  target: '_blank',
  excludeLang: true
}
```

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

### Vuexy Form Elements - Textarea

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/text-field

Provides examples for using textarea components for multi-line text input in Vuexy.

```Vue.js
<!-- Example of a textarea -->
<template>
  <v-textarea label="Enter your message"></v-textarea>
</template>

<script>
export default {
  name: 'TextareaInput'
}
</script>
```

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

### Define French Locale JSON

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/articles/how-to-use-internationalization

Example of a JSON file defining French translations for the same text elements as the English version.

```json
{
  "helloWorld": "Bonjour le monde",
  "text": {
    "paragraph": "C'est un paragraphe"
  },
  "navigation": {
    ...
  }
}
```

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

### FAQ Fake Database (TypeScript)

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/development/apps-and-pages-setup/pages

Provides a sample structure for storing FAQ data in a fake database. It defines an array of objects conforming to the FaqType interface, intended for local development or testing purposes.

```typescript
import type { FaqType } from '@/types/pages/faqTypes';

export const db: FaqType[] = [
  // ...FAQ data...
];
```

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

### Define Arabic Locale JSON

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/articles/how-to-use-internationalization

Example of a JSON file defining Arabic translations for the same text elements, demonstrating multi-language support.

```json
{
  "helloWorld": "مرحبا بالعالم",
  "text": {
    "paragraph": "هذه فقرة"
  },
  "navigation": {
    ...
  }
}
```

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

### Text Field Sizes

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/text-field

Demonstrates how to adjust the size of TextFields using the 'size' prop. This example uses the Box and CustomTextField components.

```typescript
// MUI Imports  
import Box from '@mui/material/Box'  
  
// Component Imports  
import CustomTextField from '@core/components/mui/TextField'  
  
const TextFieldSizes = () => {  
  return (  

```

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

### Vuexy Form Elements - File Uploader

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/form-elements/text-field

Provides examples for using file uploader components to handle file uploads in Vuexy.

```Vue.js
<!-- Example of a file uploader -->
<template>
  <v-file-input label="Upload file"></v-file-input>
</template>

<script>
export default {
  name: 'FileInput'
}
</script>
```

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

### VSCode Configurations for Vuexy

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/settings/vscode-configurations

This section explains the .vscode folder included in the Vuexy Admin Template package. It contains necessary extensions and settings for a smooth development experience. Users are advised to install recommended extensions and reload their VSCode editor.

```Text
If a user is using VSCode editor, then the user should not have any issues related to any extensions and plugins that we provide in the downloadable package.
We provide `.vscode` folder in the root directory of the downloadable package. In this folder, we provide all the extensions and settings that are necessary for your project to run smoothly.
The user need to install all the recommended extensions that are suggested by the VSCode editor. After all the installations are done, reload or close & reopen your VSCode editor.
```

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

### Update Default Locale in i18n.ts

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/development/translation/change-default-language

Modify the `defaultLocale` in `src/configs/i18n.ts` to set your desired default language. This example sets German ('de') as the default.

```typescript
exportconst i18n ={
  defaultLocale:'de',// Set German as the default language
  locales:['en','de'],
  langDirection:{
    en:'ltr',
    de:'ltr'
}
}asconst

```

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

### Pagination Sizes Example

Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/user-interface/components/pagination

Illustrates how to control the size of the Pagination component using the 'size' prop, accepting 'small' or 'large' values. This allows for responsive sizing.

```jsx
import React from 'react'
import Pagination from '@mui/material/Pagination'

function PaginationSizes() {
  return (
    <>
      <Pagination size="small" count={10} />
      <Pagination size="large" count={10} />
    </>
  )
}

export default PaginationSizes
```