Contentful App Vue Starter Template

Build a Contentful App using Vue3 + Vite2. 🍟

Table of Contents

• 🥦 Features

• 📦 Pre-packed

• ☑️ Checklist

• 🛠 Setup

• 🧪 Development

• 🎮 Getting Started

🥦 Features

• ⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness

• 🧲 Components auto importing

• 🍍 State Management via Pinia

• 🎨 Windi CSS - next generation utility-first CSS framework

• 😃 Use icons from any icon sets, with no compromise

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing - use Composition API and others directly

• 🖨 Server-side generation (SSG) via vite-ssg

• 🦔 Critical CSS via critters

• 🦾 TypeScript, of course

📦 Pre-packed

UI Frameworks

• Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features!
  • Windi CSS Typography

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• unplugin-icons - icons as Vue components

Plugins

• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• vite-plugin-windicss - Windi CSS Integration
• VueUse - collection of useful composition APIs

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• vite-ssg - Server-side generation
  • critters - Critical CSS
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • Windi CSS Intellisense - IDE support for Windi CSS
  • ESLint

☑️ Checklist

When you use this template, try follow the checklist to update your info properly

• Setup Contentful App
• Rename name field in package.json
• Change the author name in LICENSE
• Clean up the READMEs

🛠 Setup

# 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.

# 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, 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.