# @tailor-cms/tce-vue

> Custom content element starter template

Latest version **0.2.0** (published 2022-08-25) · 0 weekly downloads

## Install

```sh
npm install @tailor-cms/tce-vue
pnpm add @tailor-cms/tce-vue
yarn add @tailor-cms/tce-vue
bun add @tailor-cms/tce-vue
```

Provides the command `tce-vue`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-08-25 |
| First published | 2022-08-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 80.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ExtensionEngine |
| Maintainers | marjev, undersc0pe, ee_admin, ikovac |

## Links

- npm: https://www.npmjs.com/package/@tailor-cms/tce-vue
- npm.io page: https://npm.io/package/@tailor-cms/tce-vue

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^3.2.37
- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [shelljs](https://npm.io/package/shelljs.md) ^0.8.5
- [vuetify](https://npm.io/package/vuetify.md) ^3.0.0-beta.9
- [enquirer](https://npm.io/package/enquirer.md) ^2.3.6
- [@mdi/font](https://npm.io/package/@mdi/font.md) 5.9.55
- [webfontloader](https://npm.io/package/webfontloader.md) ^1.0.0
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) *
- [@npmcli/package-json](https://npm.io/package/@npmcli/package-json.md) ^2.0.0
- [validate-npm-package-name](https://npm.io/package/validate-npm-package-name.md) ^4.0.0

## Recent versions

- 0.2.0 (latest) — 2022-08-25
- 0.1.0 — 2022-08-25

## README

# tce-template-vue

Template project to quickly get started developing custom content elements.

> **:warning: DISCLAIMER**
> The project is in early prototype phase. More info will be added later.

## Description

This project is a starting point used for developing custom content elements
for [Tailor](https://github.com/ExtensionEngine/tailor).
It is intended to get you up and running quickly by bootstraping the application
structure and setting base default properties.

## Requirements

- Node & npm

## Setup

The project is already preconfigured with certain defaults,
however it is necessary to go through some properties and modify the values
for the purposes of your specific custom content element.

#### Instructions

1. Run `npx @tailor-cms/tce-vue` and follow the instructions to setup the project

#### `content-element` folder

##### Folder structure
<ul>
  <li>index.ts - contains custom element manifest</li>
  <li>typings.ts - contains TypeScript type definitions</li>
  <li>display subfolder
    <ul>
      <li>index.ts - main file for the display version on the content element</li>
    </ul>
  </li>
  <li>edit subfolder
    <ul>
      <li>index.ts - main file for the edit version of the content element</li>
      <li>TopToolbar.ts - file for top toolbar used in the edit version, optional</li>
      <li>SideToolbar.ts - file for side toolbar used in the edit version, optional</li>
    </ul>
  </li>
</ul>

Add code for the edit component of your element to `edit/index.vue` file. If the element
supports them, you can also add code for top toolbar and side toolbar in the designated
files. In the same manner add code for the display component to `display/index.vue` file. 
You can choose any kind of component composition, however only root `Edit` and `Display`
components can be exposed as a part of the element's interface. TypeScript types can be
added to support better developer experience and serve as a documentation for the element.
Use the `ElementData` interface in `typings.ts` file to specify and list the data that 
your element requires and manages. The `initState` function can optionally be specified 
to return the initial state of that data.
Make sure to edit the relevant properties of the manifest in `index.ts` file.

#### `preview` folder

The intent of the previewer is to provide a development environment outside
of Tailor CMS and other external systems. That way, you're able to get early 
feedback on the element you're building and test it in isolation.
Previewer supports sharing common properties between edit and display states if those exist.
Look for the comments and placeholders in the code to wire up the components.

#### Used technologies

The project currently uses Vue 3, Vite and Vuetify 3 beta. Note that some features
from the older versions of Vue and Vuetify may not be supported or work as expected.

---
_Source: https://npm.io/package/@tailor-cms/tce-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._