You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-`components/ecommerce` NuxtStore UI components, like `ProductCard` or `Review`
73
+
-`components` NuxtStore UI components, like `ProductCard` or `Review`
74
74
-`stores` Pinia store containing global state, getters and mutators
75
75
-`composables` Contains reusable composition functions, e.g. data fetchers and stateful helpers
76
76
-`shared` Contains types and utilities [shared](https://github.com/nuxt/nuxt/releases/tag/v3.14.0) across client and server e.g `product.type.ts`. Auto-import support will follow in next major release.
77
77
-`tests` Contains mocks for components, composables and store actions
78
78
79
-
## Guide
79
+
## Project Guide
80
80
81
81
This project follows a few conventions to help with organizing your code:
82
82
83
83
- Each function is located in a dedicated module and exported from the `index.ts` file.
84
-
- In this nuxt application, avoid importing auto-imported APIs (ref, onMounted etc.) and PrimeVue components (Dialog, Carousel etc.)
84
+
- In this nuxt application, avoid importing auto-imported APIs (ref, onMounted etc.) or compiler macros (defineProps, defineEmits etc.) and PrimeVue components (Button, InputText, Dialog, Carousel etc.)
85
85
- Names are short, descriptive and must follow our consistent naming convention ([guide](https://docs.vaah.dev/guide/code))
86
86
- Follow this [nuxt guide](https://docs.vaah.dev/guide/nuxt) to avoid common mistakes and comply with industry standard practices
87
87
- Functions (including composables and utils) are exported using explicit named exports instead of anonymous exports
@@ -96,37 +96,51 @@ This project follows a few conventions to help with organizing your code:
96
96
97
97
### Components
98
98
99
-
NuxtStore UI leverages [PrimeVue](https://primevue.org/) as the building blocks of storefront components. All components are auto-imported by their name (no path-prefix) and are located inside subfolders in the `components` directory.
99
+
NuxtStore UI follows [atomic design principle](https://atomicdesign.bradfrost.com/chapter-2/) to develop components and it leverages [PrimeVue](https://primevue.org/) as the building blocks of storefront components. All components are auto-imported by their name (no path-prefix) and are located inside subfolders in the `components` directory.
100
100
101
101
- Introduction to project components:
102
102
103
-
- Representational components that are designed to fulfill project requirements
103
+
- Consists of representational components that are designed to fulfill project requirements
104
+
- Components should be placed in dedicated folders inside components directory
105
+
- Root of the component folder has `atoms`, `molecules` and `organisms`
104
106
- Each component name must be prefixed with **"Ns"** (e.g **NsProductCard**)
105
107
- TypeScript types are located inside the SFC for ease of access and coupling
106
108
- Tests for components are located in the `/tests/components` folder (e.g **NsUserAddress.spec.ts**)
107
-
- Folders inside /components must follow their purpose
109
+
- Folders inside /atoms, /molecules and /organisms must follow their purpose
108
110
109
-
Expected file/folder structure:
111
+
Expected directory structure:
110
112
111
113
```shell
112
114
components/
113
-
└── ui/
114
-
└── NsHeader.vue
115
+
└── atoms/
116
+
└── cart/
117
+
└── NsAddToCartButton.vue
118
+
└── NsCartIcon.vue
119
+
└── ui/
120
+
└── NsHeader.vue
121
+
└── NsFooter.vue
115
122
└── ...
116
-
└── ecommerce/
117
-
└── NsCartItem.vue
123
+
└── molecules/
124
+
└── form/
125
+
└── NsEmailInput.vue
126
+
└── NsPasswordInput.vue
118
127
└── ...
119
-
└── forms/
120
-
└── NsSignUpForm.vue
128
+
└── organisms/
129
+
└── address/
130
+
└── NsAddressCard.vue
131
+
└── cart/
132
+
└── NsCartOverview.vue
133
+
└── forms/
134
+
└── NsSignUpForm.vue
135
+
└── NsAddressForm.vue
121
136
└── ...
122
-
└── ...
123
137
```
124
138
125
139
For more information about available NuxtStore components for Vue (Nuxt), check out [documentation]().
- Vue (Nuxt) components should follow `PascalCase` pattern (`CategoryFilters`, `Heading`)
130
144
- The types for component's props should be named `{Component}Props` and exist in the same SFC as the component. For example, `GalleryProps` or `HeadingProps`
131
145
- Line of code in a single file component must not exceed 200 (formatted)
0 commit comments