This chapter introduces optional dependencies, why we have them in our project and how you can easily remove them.
The FSXA-UI is a component library containing all sections that have been implemented in our project `Smart Living'.
Why do we use this?
We created this component library so that all components from our standard project are available to everyone. Since we also need exactly these components in this project, they are also used here.
How to remove
To remove the FSXA UI from the project, the dependency must first be removed.
npm uninstall fsxa-ui
The FSXA UI must be removed from all components in the components/fsxa
folder.
The best way to see if a component is used is to look at the imports at the beginning of a file.
If the FSXA-UI is imported there, remove the import. Also remove any elements from FSXA-UI used in the render
function.
Also, the CSS file 'fsxa-ui/dist/fsxa-ui.css'
must be removed from the css
attribute from the nuxt.config.ts
file.
TailwindCSS is a utility-first CSS framework, with which the writing of own CSS classes is no longer necessary.
Why do we use this?
We use TailwindCSS to create responsive designs without having to create additional CSS files.
How to remove
See this Removing Tailwind chapter.
Vue-Tsx-Support is a library that allows to use the TSX syntax with Vue.js.
Why do we use this?
We use this library to get better TypeScript support.
How to remove
First, the dependency must be removed.
npm uninstall vue-tsx-support
Then all existing components must be adapted.
The file extension changes to .vue
and inside the file a new tag template
has to be created, containing the HTML.
If there are any conditions or loops in the HTML they have to be transferred into the Vue.js syntax.
Semantic-Release is a library that allows to automate releases on GitHub.
Why do we use this?
We use this library to automatically increment the version number during our release process and publish release notes.
How to remove
First, all the required dependencies must be removed.
npm uninstall cz-conventional-changelog commitizen @semantic-release/changelog @semantic-release/commit-analyzer @semantic-release/git @semantic-release/github @semantic-release/release-notes-generator @commitlint/cli @commitlint/config-conventional
Also, the scripts need to be removed.
To do this, the entries commit
, commitmsg
, and semantic-release
must be removed in package.json
under the attribute scripts
.
https://github.com/cypress-io/cypress is a library that allows End-2-End testing.
Why do we use this?
We use Cypress to ensure functionality and verify changes within the PWA. We have written automated end-2-end tests using the Cypress framework, which should reduce the manual testing effort.
How to remove
First, all the required dependencies must be removed.
npm uninstall cypress start-server-and-test eslint-plugin-cypress
Also, the cypress folder and the scripts need to be removed.
To do this, you can delete the folder cypress
from your filesystem and remove the entries cy:open
and test:e2e
in package.json
under the attribute scripts
.