|
1 | | -# Nuxt 3 Minimal Starter |
| 1 | +# Nuxt & Vue Feed Example |
2 | 2 |
|
3 | | -Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. |
| 3 | + |
4 | 4 |
|
5 | | -## Setup |
| 5 | +## Getting Started |
6 | 6 |
|
7 | | -Make sure to install the dependencies: |
| 7 | +This is a custom activity feed modeled after Notion and built using the [Knock JavaScript SDK](https://docs.knock.app/sdks/javascript/quick-start). It's purpose is to show you how to build custom feed implementations using other UI libraries or your own design system. This example uses Nuxt, Vue, and [shadcn/vue](https://www.shadcn-vue.com/). |
8 | 8 |
|
9 | | -```bash |
10 | | -# npm |
11 | | -npm install |
12 | | - |
13 | | -# pnpm |
14 | | -pnpm install |
15 | | - |
16 | | -# yarn |
17 | | -yarn install |
18 | | - |
19 | | -# bun |
20 | | -bun install |
21 | | -``` |
22 | | - |
23 | | -## Development Server |
24 | | - |
25 | | -Start the development server on `http://localhost:3000`: |
| 9 | +To clone the repository locally, run this command: |
26 | 10 |
|
27 | 11 | ```bash |
28 | | -# npm |
29 | | -npm run dev |
30 | | - |
31 | | -# pnpm |
32 | | -pnpm run dev |
33 | | - |
34 | | -# yarn |
35 | | -yarn dev |
36 | | - |
37 | | -# bun |
38 | | -bun run dev |
| 12 | +git clone https://github.com/knocklabs/notion-feed-example.git |
39 | 13 | ``` |
40 | 14 |
|
41 | | -## Production |
42 | | - |
43 | | -Build the application for production: |
| 15 | +Then create a new `.env.local` file from the sample with this command: |
44 | 16 |
|
45 | 17 | ```bash |
46 | | -# npm |
47 | | -npm run build |
| 18 | +cp .env.sample .env.local |
| 19 | +``` |
48 | 20 |
|
49 | | -# pnpm |
50 | | -pnpm run build |
| 21 | +To use this example, you'll need [an account on Knock](https://dashboard.knock.app/), as well as an in-app feed channel with a workflow that produces in-app feed messages. |
51 | 22 |
|
52 | | -# yarn |
53 | | -yarn build |
| 23 | +You'll also need: |
54 | 24 |
|
55 | | -# bun |
56 | | -bun run build |
57 | | -``` |
| 25 | +- A public API key for the Knock environment (set as NEXT_PUBLIC_KNOCK_PUBLIC_API_KEY) |
| 26 | +- The channel ID for the in-app feed (set as NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID) |
| 27 | +- A Knock user ID (set as NEXT_PUBLIC_KNOCK_USER_ID) |
58 | 28 |
|
59 | | -Locally preview production build: |
| 29 | +Once you've added those values and environment variables, you can run the project locally on `http://localhost:3000`: |
60 | 30 |
|
61 | 31 | ```bash |
62 | | -# npm |
63 | | -npm run preview |
64 | | - |
65 | | -# pnpm |
66 | | -pnpm run preview |
| 32 | +npm run dev |
| 33 | +``` |
67 | 34 |
|
68 | | -# yarn |
69 | | -yarn preview |
| 35 | +## Tutorials |
70 | 36 |
|
71 | | -# bun |
72 | | -bun run preview |
73 | | -``` |
| 37 | +You can reference the following resources as you get started. We created blog posts and videos for creating both the base feed experience and integrating toasts. |
74 | 38 |
|
75 | | -Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. |
| 39 | +### Create a Notion-style feed |
0 commit comments