vue-skeleton

Setup 🚀

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

npx @pota/create vue my-vue-app

Standards 📒

This project follows the MediaMonks Frontend Coding Standards

Project Structure ⛩️

source

src/components

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

src/config

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

hidden TODOs

---

Features 🔋

Pota Commands

build - builds the source using webpack.

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.

dev - starts the development service using webpack-dev-server.

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

---

Scripts

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.

---

JavaScript / TypeScript

hidden TODOs

---

CSS

hidden TODOs

---

Images

hidden TODOs

---

Misc. Assets

hidden TODOs

---

Linting & Formatting

hidden TODOs

---

Deployment

hidden TODOs

---

Git

hidden TODOs

---

Storybook

hidden TODOs

---

Testing

hidden TODOs

---

Web Vitals

hidden TODOs

---

Routing

hidden TODOs

---

State Management

hidden TODOs

---

Continuous Integration / Continuous Deployment

Bitbucket

webpack-skeleton comes with bitbucket-pipelines.yml, pre-configured to run check-types, lint and test scripts.

hidden TODOs