# nuxt-typo3-theme

> Customizable UI theme for [nuxt-typo3](https://github.com/TYPO3-Initiatives/nuxt-typo3).

Latest version **0.0.3-alpha.8** (published 2022-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-typo3-theme
pnpm add nuxt-typo3-theme
yarn add nuxt-typo3-theme
bun add nuxt-typo3-theme
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3-alpha.8 |
| Published | 2022-02-04 |
| First published | 2021-06-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 208.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mercs600 |

## Links

- npm: https://www.npmjs.com/package/nuxt-typo3-theme
- Homepage: https://macopedia.github.io/nuxt-typo3-theme
- npm.io page: https://npm.io/package/nuxt-typo3-theme

## Dependencies (7)

- [vue-mq](https://npm.io/package/vue-mq.md) ^1.0.1
- [vue-svgicon](https://npm.io/package/vue-svgicon.md) ^3.2.9
- [sanitize.css](https://npm.io/package/sanitize.css.md) ^12.0.1
- [nuxt-typo3-ce](https://npm.io/package/nuxt-typo3-ce.md) ^0.0.3-alpha.8
- [v-click-outside](https://npm.io/package/v-click-outside.md) ^3.1.2
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^3.1.5
- [@nuxtjs/google-fonts](https://npm.io/package/@nuxtjs/google-fonts.md) ^1.3.0

## Recent versions

- 0.0.3-alpha.8 (latest) — 2022-02-04
- 0.0.3-alpha.7 — 2021-12-14
- 0.0.3-alpha.6 — 2021-12-01
- 0.0.3-alpha.5 — 2021-12-01
- 0.0.3-alpha.4 — 2021-11-18
- 0.0.3-alpha.3 — 2021-11-17
- 0.0.3-alpha.2 — 2021-11-17
- 0.0.3-alpha.1 — 2021-10-15
- 0.0.3-alpha.0 — 2021-10-13
- 0.0.2 — 2021-10-12
- 0.0.2-alpha.3 — 2021-10-11
- 0.0.2-alpha.2 — 2021-10-06
- 0.0.2-alpha.1 — 2021-10-05
- 0.0.2-alpha.0 — 2021-10-01
- 0.0.1 — 2021-10-01
- … 7 more at https://npm.io/package/nuxt-typo3-theme/versions

## README

# nuxt-typo3-theme

Customizable UI theme for [nuxt-typo3](https://github.com/TYPO3-Initiatives/nuxt-typo3).

# Features

✅ Mobile First

✅ UI for all content elements

✅ Storybook documentation

✅ TypeScript

✅ Unit test for content elements

## Requirements

This module use Nuxt+TypeScript - please setup it before:
https://typescript.nuxtjs.org/guide/setup

```bash
yarn add --dev @nuxt/typescript-build @nuxt/types
```

edit `nuxt.config.js`
```js
export default {
  buildModules: ['@nuxt/typescript-build']
}
```

Please remember to setup tsconfig.json. More info [here](https://typescript.nuxtjs.org/guide/setup/)
## Installation 

```bash
yarn add nuxt-typo3-theme
```

edit `nuxt.config.js`:

```js
  buildModules: [
    '@nuxt/typescript-build',
    'nuxt-typo3-theme',
    'nuxt-typo3'
  ],
```

This module install default layouts for you, so you can see warning in the console:

```bash
WARN  Duplicate layout registration, "default" has been registered as "./layouts.default.bc51ceba.vue"
```

You can delete your `layouts/default.vue` file or disable layouts provided by theme:

```js
  typo3theme: {
    layouts: false
  }
```
## Customization


### CSS

You can override css by SCSS or CSS variables:

`layouts/default.vue`:
```vue
<style>
:root {
    --color-primary: red;
    --color-bg-secondary: blue;
    --color-bg-primary: var(--color-primary);
    --font-family-primary: Helvetica;
}
</style>
```

If you need to override SCSS variables, please use https://www.npmjs.com/package/@nuxtjs/style-resources to import them as a global.

### Override components
Some components are registered as a local components, for instance `UiLogo` in `CwHeader`.
You can replace `UiLogo` by register own component as a global.

`components/UiLogo.vue`
```html
<template>
  <div>My logo</div>
</template>
<script>
export default {
  name: 'UiLogo'
}
</script>
```

`plugins/components.js`:
```js
import Vue from 'vue'
import UiLogo from '../components/Logo.vue'

Vue.component('UiLogo', UiLogo)
```

Use components file as plugin in nuxt.config.js

`nuxt.config.js`:
```js
plugins: [
  '~plugins/components'
],
```

## Resources
+ [Nuxt-TYPO3 Documentation ](https://typo3-initiatives.github.io/nuxt-typo3/)
+ [Nuxt documentation](https://nuxtjs.org/)

---
_Source: https://npm.io/package/nuxt-typo3-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._