Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/datocms/vue-datocms
Vue.js components for DatoCMS
https://github.com/datocms/vue-datocms
datocms vue vuejs
Last synced: about 2 months ago
JSON representation
Vue.js components for DatoCMS
- Host: GitHub
- URL: https://github.com/datocms/vue-datocms
- Owner: datocms
- License: mit
- Created: 2020-03-15T18:17:32.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-26T05:59:24.000Z (about 2 months ago)
- Last Synced: 2024-07-26T06:57:59.224Z (about 2 months ago)
- Topics: datocms, vue, vuejs
- Language: TypeScript
- Homepage: https://vue-datocms-example-datocms.vercel.app
- Size: 15.9 MB
- Stars: 28
- Watchers: 6
- Forks: 16
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
---
# vue-datocms
[](https://github.com/datocms/vue-datocms/blob/master/LICENSE) [](https://www.npmjs.com/package/vue-datocms) [](https://github.com/datocms/vue-datocms/actions/workflows/node.js.yml)
A set of components and utilities to work faster with [DatoCMS](https://www.datocms.com/) in Vue.js environments. Integrates seamlessly with [DatoCMS's GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api).
- Works with Vue 3 (version 4 is maintained for compatibility with Vue 2);
- TypeScript ready;
- Compatible with any data-fetching library (axios, Apollo);
- Usable both client and server side;
- Compatible with vanilla Vue and pretty much any other Vue-based solution.
## Table of Contents
- [vue-datocms](#vue-datocms)
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Installation](#installation)
- [Development](#development)
- [What is DatoCMS?](#what-is-datocms)
## Features
`vue-datocms` contains Vue components ready to use, helpers functions and usage examples.
[Components](https://vuejs.org/guide/essentials/component-basics.html):
- [`` and ``](src/components/Image)
- [``](src/components/VideoPlayer)
- [``](src/components/StructuredText)
[Composables](https://vuejs.org/guide/reusability/composables.html):
- [`useQuerySubscription`](src/composables/useQuerySubscription)
- [`useSiteSearch`](src/composables/useSiteSearch)
- [`useVideoPlayer`](src/composables/useVideoPlayer)
Helpers:
- [`toHead`](src/lib/toHead)
## Installation
```
# First, install Vue
npm install vue
# Then install vue-datocms
npm install vue-datocms
# Demos
For fully working examples take a look at our [examples directory](https://github.com/datocms/vue-datocms/tree/master/examples).
Live demo: [https://vue-datocms-example.netlify.com/](https://vue-datocms-example.netlify.com/)
```
## Development
This repository contains a number of demos/examples. You can use them to locally test your changes.
```bash
cd examples
npm setup
npm run dev
```
---
# What is DatoCMS?
[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
Trusted by over 25,000 enterprise businesses, agency partners, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
**Quick links:**
- ⚡️ Get started with a [free DatoCMS account](https://dashboard.datocms.com/signup)
- 🔖 Go through the [docs](https://www.datocms.com/docs)
- ⚙️ Get [support from us and the community](https://community.datocms.com/)
- 🆕 Stay up to date on new features and fixes on the [changelog](https://www.datocms.com/product-updates)
**Our featured repos:**
- [datocms/react-datocms](https://github.com/datocms/react-datocms): React helper components for images, Structured Text rendering, and more
- [datocms/js-rest-api-clients](https://github.com/datocms/js-rest-api-clients): Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) instead.
- [datocms/cli](https://github.com/datocms/cli): Command-line interface that includes our [Contentful importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [Wordpress importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress)
- [datocms/plugins](https://github.com/datocms/plugins): Example plugins we've made that extend the editor/admin dashboard
- [DatoCMS Starters](https://www.datocms.com/marketplace/starters) has examples for various Javascript frontend frameworks
Or see [all our public repos](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)