https://github.com/myovchev/apos-vue3-demo

Demonstrate integration of Vue 3 applications in Apostrophe CMS application.
https://github.com/myovchev/apos-vue3-demo

apostrophe apostrophecms vue vue3 vue3-composition-api vue3-typescript

Last synced: 14 days ago
JSON representation

Demonstrate integration of Vue 3 applications in Apostrophe CMS application.

• Host: GitHub
• URL: https://github.com/myovchev/apos-vue3-demo
• Owner: myovchev
• License: mit
• Created: 2023-03-19T11:06:30.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-03T09:53:17.000Z (almost 2 years ago)
• Last Synced: 2024-11-05T21:49:25.179Z (2 months ago)
• Topics: apostrophe, apostrophecms, vue, vue3, vue3-composition-api, vue3-typescript
• Language: JavaScript
• Homepage:
• Size: 263 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Apostrophe 3 + Vue 3 widgets + Tailwind CSS

## Get started

Install dependencies: `npm install`

## Running the project

Run `npm run dev` to build the Apostrophe UI and start the site up. Remember, this is during alpha development, so we're all in "dev mode." The `dev` script will watch for saves in client-side CSS and Javascript and trigger a build and page refresh if they are detected. It will also restart the app when server-side code is saved.

## How to test the feature

Home page should have a Todo app mounted. Create a new page and add `todo` widget to it (create new Todo piece record in the process). It should be shown on the page, it should pre-load the existing todos from the Todo piece. It should save it's state - on adding new todos or changing completed state. 

## Integration details

- `modules/asset/index.js`: Tailwind webpack configuration

- `modules/asset/ui/src/style.css`: Tailwind entrypoint

- `modules/asset/ui/src/index.js`: Bundle the Tailwind styles as a global include

- `modules/todo` - A piece that also mounts external Vue 3 app and builds it's own

- `modules/todo-widget` - A widget that mounts (offered in the `todo` piece) Apostrophe Vue app

- `index.d.ts` - To let TS know we have types, needed because our module is CJS.

- `modules/@apostrophe/home-page/views/page.html`: Replace the default home page

- `modules/default-page/views/page.html`: Add `todo` widget

## Dependencies

- `myovchev/todo-vue3` - a repository installed as npm package `@myovchev/todo-vue3`, contains simple Todo App, bundled with Vite.

- `corllete/apos-vue3` - Apostrophe Webpack configuration for Vue 3 (not an npm package yet). 

- `vue@^3` - Vue 3

- `vue-tsc` - Development only, alows CI type checking (`npm run test`)

Additional dependencies related with the Tailwind CSS integration - `css-loader`, `postcss`, `postcss-loader`, `style-loader`, `tailwindcss`.

## Notes

It's not "ready" to do anything but to demonstrate our Todo app. It needs global styles to handle vertical spacing in and between rich-text/image/video.todo widgets.