# @notice-org/vue-notice

> This package provides Notice Component to render Notice.studio projects in Vue and NuxtJs applications.

Latest version **1.0.0** (published 2022-09-14) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @notice-org/vue-notice
pnpm add @notice-org/vue-notice
yarn add @notice-org/vue-notice
bun add @notice-org/vue-notice
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-09-14 |
| First published | 2022-09-14 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | NoticeStudio |
| Maintainers | jonasroussel_notice, rajatwgc, qch-notice |
| Keywords | Notice, FAQ, Blog, Documentation, Rich Snippet, SEO |

## Links

- npm: https://www.npmjs.com/package/@notice-org/vue-notice
- npm.io page: https://npm.io/package/@notice-org/vue-notice

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-09-14

## README

# vue-notice
This package provides Notice Component to render [Notice.studio](https://notice.studio/) projects in Vue and NuxtJs applications.

## Notice - FAQ, Blog & Documentation
Notice is a no-code editor that allows you to create, customize and implement an FAQ, documentation or blog in any web or mobile applications.

You are invited to visit [notice.studio](https://notice.studio/) and start now deploying your solution!

### Enrich your content
It supercharges your public pages by improving the SEO automatically. Your content will take much more space in search results. Google demonstrated that enriched content gets many more likes, I mean, clicks, than classic content.

### No-code collaborative tool
Collaborate with your team, get insights about your users and improve your articles.

### A no-code platform?
No-code means that you don't need to know how to code to benefit from all the superpowers of a Notice FAQ.

The search bar, the collaboration, the insights, the SEO optimization, everything is done under the hood automatically for you, you just need to write your content, we make it smart.


## Installation

```bash
npm install @notice-org/vue-notice
```

## Usage

### Vue
1. Import Globally
```jsx
import { createApp } from 'vue'
import App from './App.vue'
import NoticeBlock from '@notice-org/vue-notice'

createApp(App).component('NoticeBlock', NoticeBlock).mount('#app')
```
2. Import in component file
```jsx
<script>
import NoticeBlock from '@notice-org/vue-notice'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {NoticeBlock}
}
</script>
```
Usage in template
```jsx
  <NoticeBlock projectid="your-project-id-here"></NoticeBlock>
```
### NuxtJs
1. Import Globally
Create 'plugins' folder and create a file notice.client.js
```jsx
import Vue from 'vue'
import NoticeBlock from '@notice-org/vue-notice'

if (process.client) {
Vue.component("NoticeBlock",NoticeBlock)
}
```
In nuxt.config.js add this snippet.
```jsx
  plugins: [
  {
      src: '~/plugins/notice.client.js',
      mode: 'client'
    }
  ]
```
2. Import in component file
```jsx
<script>
export default {
  name: 'HelloWorld',
  components: {
		NoticeBlock: () => import('@notice-org/vue-notice')
	}
}
</script>
```
Usage in template
```jsx
<client-only>
	<NoticeBlock projectid="your-project-id-here"></NoticeBlock>
</client-only>
```

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