Search
⌘ K
Folder Structure
Vue
Path | Description |
---|---|
dist/ | The built output, run command npm run build to create it. |
scripts/ | Design token tool folder |
cypress/ | You can put here your e2e test files |
public/ | Pure static assets (directly copied) |
src/ | Main source code |
src/ App.vue | Vue entry component |
src/ main.ts | The entrypoint for Vue, where the Vue app is created. |
src/ design-tokens.json | Design tokens file. |
src/ assets/ | It contains assets like icons, images, fonts, style and every asset that you want the build tool to process. |
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/ directives/ | Directives folder |
src/ lang/ | Here you can find all translations and configuration for i18n |
src/ app-layouts/ | This folder contains the layouts that you can use right away in Pinx: Blank , VerticalNav , HorizontalNav . |
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/ 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 |
cypress.config.ts | Cypress configuration file |
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 |
figma-tokens.json | Design tokens list for Figma |
Nuxt
Path | Description |
---|---|
.nuxt/ | Folder generated by Nuxt |
.output/ | The built output, run command npm run build to create it. |
assets/ | It contains assets like icons, images, fonts, style and every asset that you want the build tool to process. |
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. |
cypress/ | You can put here your e2e test files |
directives/ | Directives folder |
lang/ | Here you can find all translations and configuration for i18n |
app-layouts/ | This folder contains the layouts that you can use right away in Pinx: Blank , VerticalNav , HorizontalNav . |
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. |
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 |
error.vue | Nuxt route error component |
design-tokens.json | Design tokens file. |
figma-tokens.json | Design tokens list for Figma |
pages-extend.ts | Through this file, you can extend the pages generated by Nuxt. |
cypress.config.ts | Cypress configuration file |
package.json | List of scripts and dependencies |
tailwind.config.js | Tailwind configuration file |
nuxt.config.ts | Nuxt configuration file |
vitest.config.ts | Vitest configuration file |
tsconfig.json | Typescript configuration file |