Folder Structure

Vue

Path	Description
cypress/	You can put here your e2e test files
dist/	The built output, run command `npm run build` to create it.
public/	Pure static assets (directly copied)
scripts/	Design token tool folder
src/	Main source code
src/ app-layouts/	This folder contains the layouts that you can use right away in Pinx: `Blank` , `VerticalNav` , `HorizontalNav` .
src/ assets/	It contains assets like icons, images, fonts, style and every asset that you want the build tool to process.
src/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.
src/assets/scss/ index.scss	Main style file, imports all scss file used for Pinx layout and components.
src/ components/	It is where you put all your Vue components which can then be imported inside your pages or other components. In Vue mode, you can enable automatic component importing using the `unplugin-vue-components` module. You can find its implementation and configuration in the `vite.config.ts` file.
src/ composables/	Composables folder
src/ directives/	Directives folder
src/ lang/	Here you can find all translations and configuration for `i18n`
src/ router/	This directory contains configuration related to router. It contains `index.ts` which is default `vue-router` config used by Pinx
src/ stores/	Folder contains `Pinia` stores.
src/theme/ index.ts	This file contains the default settings regarding the customization of the template.
src/ types/	You can you this folder to store types used in the application
src/ utils/	Includes files that provide helper functions for the theme..
src/ views/	Pages folder
src/ App.vue	Vue entry component
src/ design-tokens.json	Design tokens file.
src/ main.ts	The entrypoint for Vue, where the Vue app is created.
cypress.config.ts	Cypress configuration file
eslint.config.mjs	ESLint configuration file
figma-tokens.json	Design tokens list for `Figma`
package.json	List of scripts and dependencies
tailwind.config.js	Tailwind configuration file
tsconfig.json	Typescript configuration file
vite.config.ts	Vitejs configuration file
vitest.config.ts	Vitest configuration file

Nuxt

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 . 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` 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
package.json	List of scripts and dependencies
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