{"id":21148988,"url":"https://github.com/macopedia/nuxt-typo3-theme","last_synced_at":"2025-03-14T14:14:33.443Z","repository":{"id":44610624,"uuid":"411318487","full_name":"macopedia/nuxt-typo3-theme","owner":"macopedia","description":"TYPO3 Headless and PWA UI components and default theme","archived":false,"fork":false,"pushed_at":"2022-02-24T16:02:59.000Z","size":7371,"stargazers_count":3,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-07T03:04:38.483Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/macopedia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-28T14:34:42.000Z","updated_at":"2022-10-09T09:32:11.000Z","dependencies_parsed_at":"2022-09-25T00:50:21.636Z","dependency_job_id":null,"html_url":"https://github.com/macopedia/nuxt-typo3-theme","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macopedia%2Fnuxt-typo3-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macopedia%2Fnuxt-typo3-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macopedia%2Fnuxt-typo3-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macopedia%2Fnuxt-typo3-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/macopedia","download_url":"https://codeload.github.com/macopedia/nuxt-typo3-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243589331,"owners_count":20315471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T09:30:15.183Z","updated_at":"2025-03-14T14:14:33.419Z","avatar_url":"https://github.com/macopedia.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nuxt-typo3-theme\n\nCustomizable UI theme for [nuxt-typo3](https://github.com/TYPO3-Initiatives/nuxt-typo3).\n\n# Features\n\n✅ Mobile First\n\n✅ UI for all content elements\n\n✅ Storybook documentation\n\n✅ TypeScript\n\n✅ Unit test for content elements\n\n## Requirements\n\nThis module uses Nuxt+TypeScript - please setup it beforehand:\nhttps://typescript.nuxtjs.org/guide/setup\n\nnuxt-typo3 is required to run this theme https://github.com/TYPO3-Initiatives/nuxt-typo3. Please remember to setup the `tsconfig.json`. More info [here](https://typescript.nuxtjs.org/guide/setup/), and setup the nuxt-typo3 configuration including `baseUrl` and api `baseUrl`. Nuxt-typo3-theme requires `sass` and `sass-loader \u003c= ^10.1.1`. Version `12` is not supported in `Vue 2.X`\n\n```bash\nyarn add --dev @nuxt/typescript-build @nuxt/types sass sass-loader@10.1.1\nyarn add nuxt-typo3\n```\n\nedit `nuxt.config.js`\n```js\nexport default {\n  buildModules: ['@nuxt/typescript-build']\n}\n```\n## Installation \n\n```bash\nyarn add nuxt-typo3-theme\n```\n\nedit `nuxt.config.js`:\n\n```js\n  buildModules: [\n    '@nuxt/typescript-build',\n    'nuxt-typo3-theme',\n    'nuxt-typo3'\n  ],\n```\n\n⚠️ This module installs default layouts for you, so you may see warning in the console:\n\n```bash\nWARN  Duplicate layout registration, \"default\" has been registered as \"./layouts.default.bc51ceba.vue\"\n```\n\nIf this happens, you can delete your `layouts/default.vue` file or disable layouts provided by the theme in `nuxt.config.js`:\n\n```js\n  typo3theme: {\n    layouts: false\n  }\n```\n## Customization\n\nIf you want to customize the layout, firstly disable default layout provided by nuxt-typo3-theme\n\n```js\n  typo3theme: {\n    layouts: false\n  }\n```\n### CSS\n\nYou can override CSS by SCSS or CSS variables:\n\nif overriding CSS variables, do it on `html:root` tag\n\n`layouts/default.vue`:\n```vue\n\u003cstyle\u003e\nhtml:root {\n    --color-primary: red;\n    --color-bg-secondary: blue;\n    --color-bg-primary: var(--color-primary);\n    --font-family-primary: Helvetica;\n}\n\u003c/style\u003e\n```\nIf you want to override component specific CSS variables or classes, you have to register the component, as described [here](###override-components). You don't have to change anything else inside the registered component if you don't want to.\n\n```vue\n\u003cscript lang=\"ts\" src=\"nuxt-typo3-theme/src/components/UiGrid/UiCol/UiCol.vue\"\u003e\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.order-1 {\n order: 2;\n}\n\u003c/style\u003e\n```\n\nIf you need to override SCSS variables, please use https://www.npmjs.com/package/@nuxtjs/style-resources to import them as global ones.\n\n### Override components\nSome components are registered as a local components, for instance `UiLogo` in `CwHeader`.\nYou can replace `UiLogo` by registering your own component as a global one.\n\n`components/UiLogo.vue`\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003eMy logo\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: 'UiLogo'\n}\n\u003c/script\u003e\n```\n\n`plugins/components.js`:\n```js\nimport Vue from 'vue'\nimport UiLogo from '../components/Logo.vue'\n\nVue.component('UiLogo', UiLogo)\n```\n\nUse `components` file as a plugin in `nuxt.config.js`\n\n`nuxt.config.js`:\n```js\nplugins: [\n  '~plugins/components'\n],\n```\n\n## Resources\n+ [Nuxt-TYPO3 Documentation ](https://typo3-initiatives.github.io/nuxt-typo3/)\n+ [Nuxt documentation](https://nuxtjs.org/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacopedia%2Fnuxt-typo3-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmacopedia%2Fnuxt-typo3-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacopedia%2Fnuxt-typo3-theme/lists"}