Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bcakmakoglu/contentful-vitesse-starter
A Contentful App Starter Template using Vue3 + Vite2. ⚡️
https://github.com/bcakmakoglu/contentful-vitesse-starter
contentful contentful-app vite vitesse vue vue3
Last synced: 3 days ago
JSON representation
A Contentful App Starter Template using Vue3 + Vite2. ⚡️
- Host: GitHub
- URL: https://github.com/bcakmakoglu/contentful-vitesse-starter
- Owner: bcakmakoglu
- License: mit
- Created: 2021-09-22T12:09:58.000Z (about 3 years ago)
- Default Branch: develop
- Last Pushed: 2021-10-13T06:30:30.000Z (about 3 years ago)
- Last Synced: 2024-10-12T15:07:22.127Z (about 1 month ago)
- Topics: contentful, contentful-app, vite, vitesse, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 155 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Contentful App Vue Starter Template
Build a Contentful App using Vue3 + Vite2. 🍟
[](https://david-dm.org/bcakmakoglu/contentful-vitesse-starter)
[](https://david-dm.org/bcakmakoglu/contentful-vitesse-starter?type=dev)
## Table of Contents
* [🥦 Features](#-features)
* [📦 Pre-packed](#-pre-packed)
* [☑️ Checklist](#-checklist)
* [🛠 Setup](#-setup)
* [🧪 Development](#-development)
* [🎮 Getting Started](#-getting-started)
## 🥦 Features
- ⚡️ [Vue 3](https://github.com/vuejs/vue-next), [Vite 2](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness
- 🧲 [Components auto importing](./src/components)
- 🍍 [State Management via Pinia](https://pinia.esm.dev/)
- 🎨 [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework
- 😃 [Use icons from any icon sets, with no compromise](https://github.com/antfu/unplugin-icons)
- 🔥 Use the [new `` syntax](https://github.com/vuejs/rfcs/pull/227)
- 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly
- 🖨 Server-side generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg)
- 🦔 Critical CSS via [critters](https://github.com/GoogleChromeLabs/critters)
- 🦾 TypeScript, of course
## 📦 Pre-packed
### UI Frameworks
- [Windi CSS](https://github.com/windicss/windicss) (On-demand [TailwindCSS](https://tailwindcss.com/)) - lighter and faster, with a bunch of additional features!
- [Windi CSS Typography](https://windicss.org/plugins/official/typography.html)
### Icons
- [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - icons as Vue components
### Plugins
- [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the composition api
- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - Windi CSS Integration
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
### Coding Style
- Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
- [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi.
### Dev tools
- [TypeScript](https://www.typescriptlang.org/)
- [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
- [`vite-ssg`](https://github.com/antfu/vite-ssg) - Server-side generation
- [critters](https://github.com/GoogleChromeLabs/critters) - Critical CSS
- [VS Code Extensions](./.vscode/extensions.json)
- [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - Fire up Vite server automatically
- [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `<script setup>` IDE support
- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Icon inline display and autocomplete
- [Windi CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - IDE support for Windi CSS
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
## ☑️ Checklist
When you use this template, try follow the checklist to update your info properly
- [ ] [Setup Contentful App](https://www.contentful.com/developers/docs/extensibility/app-framework/tutorial/#embed-your-app-in-the-contentful-web-app)
- [ ] Rename `name` field in `package.json`
- [ ] Change the author name in `LICENSE`
- [ ] Clean up the READMEs
## 🛠 Setup
```bash
# create a new project
$ npx degit bcakmakoglu/contentful-vitesse-starter my-app
# or just clone the repo
$ git clone https://github.com/bcakmakoglu/contentful-vitesse-starter.git my-app
# you're free to use the package manager of your choosing
$ pnpm install
```
## 🧪 Development
After setting up your Contentful App config on the Contentful Web Application,
you can start development.
For instructions on setting up the App check the [documentation](https://www.contentful.com/developers/docs/extensibility/app-framework/tutorial/#embed-your-app-in-the-contentful-web-app).
```bash
# start (dev)
$ pnpm dev
# build app
$ pnpm build
# serve app from dist dir
$ pnpm serve
# upload dist dir to contentful
$ pnpm upload
```
## 🎮 Getting Started
[In the components directory](./src/components),
you can find an example component for each location a Contentful App can have.
They serve as a starting point to build your app.
Each of these components will be "routed" to depending on the current
location of the app, i.e. you do not have to implement any more logic for
an app to be served at its proper location.
To see how it works check the [App component](./src/App.vue).