https://github.com/mercs600/nuxt-typo3-skin
https://github.com/mercs600/nuxt-typo3-skin
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mercs600/nuxt-typo3-skin
- Owner: mercs600
- License: mit
- Created: 2020-02-26T19:30:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T14:45:54.000Z (over 2 years ago)
- Last Synced: 2025-01-28T01:34:10.106Z (4 months ago)
- Language: Vue
- Size: 3.46 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nuxt-typo3-skin
Proof of concept additional theming for [nuxt-typo3](https://github.com/TYPO3-Initiatives/nuxt-typo3)
## Features
+ Storybook
+ Tailwind.css
+ Postcss
+ Ready to use as nuxt module
## Theme installation
in your nuxt-typo3 project
```
yarn add nuxt-typo3-skin
```
`nuxt.config.js`:
```js
...
modules: [
'nuxt-typo3-skin',
// Doc: https://github.com/TYPO3-Initiatives/nuxt-typo3
'nuxt-typo3'
],
...
```
And use our [layouts/default.vue]('/src/layouts/default.vue)
```html
import {
NavigationMain,
Logo,
HeaderMain,
FooterMain,
Breadcrumbs,
LanguageSwitcher
} from 'nuxt-typo3-skin/components'
import { mapState } from 'vuex'
export default {
components: {
NavigationMain,
HeaderMain,
FooterMain,
Logo,
Breadcrumbs,
LanguageSwitcher
},
computed: {
...mapState({
navMain: (state) => state.typo3.initial.navigation[0] || [], // get first instance from root tree,
breadcrumbs: (state) => state.typo3.page.page.breadcrumbs || [], // get breadcrumbs for current page,
currentLanguage: (state) => state.typo3.locale,
availableLanguages: (state) => state.typo3.page.languages
})
}
}
```