@pota/vue-skeleton NPM

vue-skeleton

You can create a new project using the @pota/create package.

npx @pota/create vue my-vue-app

The components folder follows atomic design guidelines, with a few additions:

Folder	Description	Example
`/atoms`	The smallest unit, must be self contained and not dependant on any external modules. (types and configuration being the exception)	`Icon`, `Paragraph`, `Heading`
`/molecules`	Must be restrained to only use atoms and minimal internal state.	`Toggle`
`/organisms`	Generally reserved for complex state uses and must use `atoms` or `molecules`.	`Form`
`/layout`	Components whose only function is taking in children and presenting them in a specific layout. Must not use `atoms`, `molecules` or `organisms`.	`Carousel`, `Modal`, `Tabs`
`/pages`	Components which are used as pages.	`Home`, `About`
`/unlisted`	Components which do not fall into any of the above categories.	`App`, global context providers

The config folder is to be used to define any sort of configuration for styles, components or logic.

hidden TODOs

npm run build # or npx pota build

Option	Type	Default	Description
`analyze`	`{Boolean}`	`false`	When enabled, will open a bundle report after bundling.
`cache`	`{Boolean}`	`true`	Toggles webpack's caching behavior.
`image-compression`	`{Boolean}`	`true`	Toggles image compression.
`mode`	`{development\\|production}`	`production`	Override webpack's mode.
`output`	`{String}`	`./build`	The build output directory.
`source-map`	`{false\\|`devtool`}`	`source-map` (production), `eval-source-map` (development)	Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues.
`public-path`	`{String}`	`/`	The location of static assets on your production server.
`type-check`	`{Boolean}`	`true`	When disabled, will ignore type related errors.
`versioning`	`{Boolean}`	`false`	When enabled, will copy assets in `./static` to a versioned directory in the output (e.g. `build/version/v2/static/...`).
`vue-options-api`	`{Boolean}`	`false`	Toggles the Vue Options API.
`vue-prod-devtools`	`{Boolean}`	`false`	Toggles support for the Vue Devtools in production.

npm run dev # or npx pota dev

Option	Type	Default	Description
`cache`	`{Boolean}`	`true`	Toggle webpack's caching behavior.
`https`	`{Boolean}`	`false`	Run the development server with HTTPS.
`image-compression`	`{Boolean}`	`true`	Toggles image compression.
`mode`	`{development\\|production}`	`production`	Override webpack's mode.
`source-map`	`{false\\|`devtool`}`	`source-map` (production), `eval-source-map` (development)	Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues.
`type-check`	`{Boolean}`	`true`	Toggles checking for type related errors.
`vue-options-api`	`{Boolean}`	`false`	Toggles the Vue Options API.

hidden TODOs

Non-Pota scripts defined in "scripts" of package.json and are runnable using npm run {script}

Script	Description
`check-types`	Checks for type errors and unused variables/types in the source directory.
`fix`	Executes all `fix:*` commands in sequence.
`fix:eslint`	Executes `eslint:lint` and fixes fixable errors.
`fix:prettier`	Formats the source files using `prettier`.
`lint`	Executes all `lint:*` commands in sequence.
`lint:eslint`	Lints the source files using `eslint`.