{"id":22490532,"url":"https://github.com/LinusBorg/slidev-theme-vuetiful","last_synced_at":"2025-08-02T22:33:12.047Z","repository":{"id":39883082,"uuid":"377523620","full_name":"LinusBorg/slidev-theme-vuetiful","owner":"LinusBorg","description":"A Slidev Theme for my talks about Vue.js","archived":false,"fork":false,"pushed_at":"2022-06-05T12:23:58.000Z","size":3759,"stargazers_count":75,"open_issues_count":3,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-03T05:13:57.040Z","etag":null,"topics":["slidev","slidev-theme"],"latest_commit_sha":null,"homepage":"https://slidev-theme-vuetiful.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LinusBorg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-16T14:25:40.000Z","updated_at":"2024-10-10T10:24:17.000Z","dependencies_parsed_at":"2022-07-17T02:16:10.112Z","dependency_job_id":null,"html_url":"https://github.com/LinusBorg/slidev-theme-vuetiful","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusBorg%2Fslidev-theme-vuetiful","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusBorg%2Fslidev-theme-vuetiful/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusBorg%2Fslidev-theme-vuetiful/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusBorg%2Fslidev-theme-vuetiful/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinusBorg","download_url":"https://codeload.github.com/LinusBorg/slidev-theme-vuetiful/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228501308,"owners_count":17930229,"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":["slidev","slidev-theme"],"created_at":"2024-12-06T17:22:18.964Z","updated_at":"2024-12-06T17:25:16.082Z","avatar_url":"https://github.com/LinusBorg.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# slidev-theme-vuetiful\n\n[![NPM version](https://img.shields.io/npm/v/slidev-theme-vuetiful?color=3AB9D4\u0026label=)](https://www.npmjs.com/package/slidev-theme-vuetiful)\n\nA Vue-inspired theme for [Slidev](https://github.com/slidevjs/slidev).\n\nLive demo: https://slidev-theme-vuetiful.netlify.app/\n\n### Features\n\n* Pretty Vue Theme\n* Subtle Animations on Cover, Section etc. slides\n* Code Highlighting with Sarah Drasner's Night Owl Theme\n* SFC Playground Integration\n* Flexible Default Layout using Grids\n* \n\n![Cover](./screenshots/cover-alt.png)\n![Default](./screenshots/default.png)\n\n## Install\n\nAdd the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.\n\n\u003cpre\u003e\u003ccode\u003e---\ntheme: \u003cb\u003evuetiful\u003c/b\u003e\n---\u003c/code\u003e\u003c/pre\u003e\n\nLearn more about [how to use a theme](https://sli.dev/themes/use).\n\n## Layouts\n\n\u003e Note: I'm still in the process of adding more slide variations.\n\nThis theme provides the following layouts:\n\n - Default (improved w/grid)\n - BigPoints\n - Cover\n - Section\n - Quote\n - SFC\n - Video\n - Outro\n\n### Default\n\nThe default slide has a few tricks up it's sleeve.\n\nIt an of course be used as-is:\n\n```\n---\n\n# This will be the heading\n\nAnd this can be used as test below it\n\n-  We can have a list.\n- With a few items.\n\n---\n\n```\n\nBut it can also have the title in a special row:\n\n```\n---\ntitle: This will now be the heading\ntitleRow: true\n---\n\nThis content can now be styled/positioned independent of the title,\nbecause it will be in a separate grid cell.\n\n---\n```\n\nWe can also do a quick column:\n\n```\n---\ncols: 1-1 # Other values: 2-1 or 1-2, as well as any valid grid-cols-* class from windiwcss\n---\n\nThis will go in the left column\n\n:::right:::\n\nThis will go into the right column\n\n---\n```\n\nYou can also combine this with the separate titleRow:\n\n```\n---\ntitle: This will span both columns\ntitleRow: true\ncols: 2-1\n---\n\nThis will be in the wider, left column\n\n:::right:::\n\nThis will be in the smaller, right column\n\n```\n\n### Cover\n\nA Cover slide for the Talk Title \u0026 Subtitle\n#### Example\n\n```frontmatter\n---\nlayout: cover\ncover: alt # to enable alternative cover\nclicks: 1\n---\n\n# Vuetiful Theme\nA Vue-inspired theme for my talks about Vue\n```\n\n\u003e Note: the `clicks: 1` is necessary for the entry transition to work properly\n\n![Screenshot of Cover Slide](./screenshots/cover-alt.png)\n\n\u003cdetails\u003e\n\u003csummary\u003eClick for more screens\u003c/summary\u003e\n\nDefault cover:\n\n![Screenshot of Cover Slide](./screenshots/cover.png)\n\nWhite alt cover:\n\n![Screenshot of Cover Slide](./screenshots/cover-alt-white.png)\n\u003c/details\u003e\n\n\n\n### Big Points\n\nThis slide type is much like the default slide, the main difference is that the content font-size is bigger and the content in centered.\n\nUseful for slides that just contain a few points or sentences.\n\n#### Example\n\n\n```frontmatter\n---\nlayout: big-points\ntitle: Need to make a few big points?\ntitleRow: true\n---\n\n- Increased font size...\n- ...and centered content\n- help stressing a few points\n\n```\n\n![Screenshot of Big-Points Slide](./screenshots/big-points.png)\n\n### Section\n\nThis slide can be used to split your talks into sections. It's meant to only have a single heading.\n\n![Section Slide](./screenshots/section.png)\n\n### Quote\n\nSometimes you want to drive home a point with a quote. This slide provides a nice way of doing that.\n\n#### Example\n\n```\n---\nlayout: quote\nauthor: Linus Borg (2021)\n---\n\n# Big quotes make your talk look fancy\n\n---\n```\n\n![Quote Slide](./screenshots/quote.png)\n\n### SFC (Single File Component Preview)\n\nThis template integrates the SFC playground ([sfc.vuejs.org](https://sfc.vuejs.org)) which allows for live demos. It's usage requires a bit of preparation/config.\n\n\n#### Config\n\n```ts\n// ./setup/main.ts\nimport { defineAppSetup } from '@slidev/types'\n\n// use Vite's raw imports to get file content as string\n// (see: https://vitejs.dev/guide/features.html#static-assets)\nimport Test from '../examples/Test.vue?raw'\nimport App from '../examples/App.vue?raw'\nimport Child from '../examples/Child.vue?raw'\n\n\ninterface Examples {\n  [key: string]: {\n    [key: string]: string\n  }\n}\nconst examples: Examples = {\n  // for examples consisting of a single file, \n  // just pass its content as value\n  // File will be named App.vue\n  Test: {\n    'App.vue': Test,\n  },\n  // to construct an example from multiple files,\n  // or have a custom name for the file,\n  // pass an object where each key is the filename \n  // and value is the file content string\n  Multiple: {\n    'App.vue': App,\n    'Child.vue': Child,\n  }\n}\n\nexport default defineAppSetup(({ app }) =\u003e {\n  // use app.provide to make all examples \n  // available to the SFC Slide implementation\n  app.provide('repl-content', examples)\n})\n```\n\n### Usage in a slide\n\n```frontmatter\n---\nlayout: sfc\nexample: Test \n---\n\n# This will be the slide's title\n```\n\n#### Example\n\n![Slide Example for SFC Playground](./screenshots/sfc.png)\n\n### Video\n\n![Slide for Videos](./screenshots/video.png)\n\n### FullImage\n\n```bash\nlayout: full-image\nimage: coverImage.png # needs to be in /public, path should not have leading slashes\n```\n\n## Contributing\n\n- `npm install`\n- `npm run dev` to start theme preview of `example.md`\n- Edit the `example.md` and style to see the changes\n- `npm run export` to generate the preview PDF\n- `npm run screenshot` to generate the preview PNG\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLinusBorg%2Fslidev-theme-vuetiful","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLinusBorg%2Fslidev-theme-vuetiful","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLinusBorg%2Fslidev-theme-vuetiful/lists"}