Skip to main content

Components

The PWA launchpad contains alot of useful components that can be used to build your e-commerce store. These components are built using nuxt.js and vue.js. Use it with the Design System to build your store with ease. Have a look at Ralph UI to see all the components available.

Overview​

The components are divided into three categories: atoms, molecules and organisms. The atoms are the smallest components that can be used to build other components. The molecules are made up of atoms and organisms are made up of molecules and atoms.

Mixins​

Some components use mixins to add functionality to the components. The mixins are located in the mixins folder. When you are using mixins, you have to import them in the component you want to use them in. You can do this by adding the following line to the top of the component:

import MixExample from 'MixExample';

All data, computed properties, methods and lifecycle hooks from the mixin will be merged into the component. If there is a conflict, the component will take precedence. This is also how you can overwrite for example a single method from the mixin.

Creating your own components​

You can create your own components or mixins easily from our pre-defined templates using this command:

npm run ralph-create

Now in the terminal, first choose wether you want to create an atom, molecule, organism or mixin. Then enter a name for the component in kebab-case, for example "banner-image". This will create the file or files needed for the component in the correct folder and from there you can start building your component.

Overriding components​

You can override the default components from Ralph UI by running the following command in your terminal:

npm run ralph-ride

Now in the terminal, you can choose which component you want to override. You will then get a choice to override only styles or override the full component. It is recommended that you override only the styles if you want to change the look of the component. If you need to change the functionality or template of the component, you have to override the full component

Danger zone

Monkey patching, duck punching and Swizzling should always be used with caution. This is no different.

If you override default components, make sure you know what you are doing. This will disable all future updates of the component. If you want to update the component, you will have to do it manually.