---
# System prepended metadata

title: 'Clone [cssGenerator](https://cssgenerator.pl/) website using Vue - Nuxt.js'

---

# Clone [cssGenerator](https://cssgenerator.pl/) website using Vue - Nuxt.js

the goal of this task is to test the experience in Frontent development (Vue - Nuxt)

![](https://i.imgur.com/On4eoFd.png)


## Table of content
- [Useful Links](#Useful-Links)
- [Task Decription](#Task-Description)
- [Required sub-tasks](#Required-sub-tasks)
- [Extra (Optional) sub-tasks](#Extra-Optional-sub-tasks)


## Useful Links
- website https://cssgenerator.pl/
- vue 3 docs: https://vuejs.org/
- nuxt docs: https://nuxtjs.org/


## Task Description
clone cssgenerator website (pick only 2 options from the 9 available options).

clicking one an option will go to new page. 

it should be similar to: [this cssgenerator page](https://cssgenerator.pl/box-shadow-generator/).


Page functionality should work as expected. For example: if you're implementing Box shadow page, page should have the options: 
   - horizontal - Vertical - blur - Spread - color - inset

Changing any option will reflect on the example box instantly.



## Required sub-tasks
- use [this testing api](https://633966a666857f698fb56bfd.mockapi.io/css-options) to get list of available css
- implement the task using Vue, Nuxt.js (vue 3 / nuxt 3 is preffered)
- use vuex / pinia
- define 2 pages (main page - 1 page for the css options) and go between them using nuxt built-in routing.
- write clean - reusable code.
- use version control tool (git).
- website should work without any problem - bugs



## Extra (Optional) sub-tasks
- use one of (tailwind - vuetify) packages are optional and preffered
- complete the task using Vuejs standard and patterns (get use of vue - Nuxt hooks, built-in funtions)
- match the page design (not required to be pixel perfect, but make sure to to have the same layout)
- deploy the project using [Netlify](https://www.netlify.com/) or any other deployment tool.