-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e4f562c
commit 8292c78
Showing
17 changed files
with
338 additions
and
955 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,36 @@ | ||
| # Getting Started | ||
|
|
||
| From your Markdown files to a deployed website in few minutes. | ||
| Add notifications, dialogs, and directives to your Vuetify application in minutes. | ||
|
|
||
| ## Play online | ||
| ## Install in your project | ||
|
|
||
| You can start playing with Docus in your browser using Stackblitz: | ||
|
|
||
| :button-link[Play on StackBlitz]{size="small" icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt-themes/docus-starter" blank} | ||
|
|
||
| ## Create a new project | ||
|
|
||
| 1. Start a fresh Docus project with: | ||
| ### Nuxt Project | ||
|
|
||
| ```bash [npx] | ||
| npx nuxi@latest init docs -t themes/docus | ||
| npx nuxi@latest module add vuetify-notifier | ||
| ``` | ||
|
|
||
| 2. Install the dependencies in the `docs` folder: | ||
| ### Vue Project | ||
|
|
||
| ::code-group | ||
|
|
||
| ```bash [npm] | ||
| npm install | ||
| npm install vuetify-notifier | ||
| ``` | ||
|
|
||
| ```bash [yarn] | ||
| yarn install | ||
| yarn install vuetify-notifier | ||
| ``` | ||
|
|
||
| ```bash [pnpm] | ||
| pnpm install --shamefully-hoist | ||
| pnpm install vuetify-notifier | ||
| ``` | ||
|
|
||
| :: | ||
|
|
||
| 3. Run the `dev` command to start Docus in development mode: | ||
|
|
||
| ## Try it out | ||
| ::code-group | ||
|
|
||
| ```bash [npm] | ||
| npm run dev | ||
| ``` | ||
|
|
||
| ```bash [yarn] | ||
| yarn dev | ||
| ``` | ||
|
|
||
| ```bash [pnpm] | ||
| pnpm run dev | ||
| ``` | ||
|
|
||
| :: | ||
|
|
||
| ::alert{type="success"} | ||
| ✨ Well done! A browser window should automatically open for <http://localhost:3000> | ||
| ::code-block{label="Preview" preview} | ||
| :sandbox{src="https://stackblitz.com/edit/vuetify-notifier?embed=1&file=src%2FApp.vue&view=preview"} | ||
| :: | ||
| :: |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| # Usage | ||
|
|
||
| ## Nuxt Project | ||
|
|
||
| Add `vuetify-notifier` module to `nuxt.config.ts` and configure it: | ||
| ::code-group | ||
|
|
||
| ```ts [nuxt.config.ts] | ||
| export default defineNuxtConfig({ | ||
| modules: [ | ||
| 'vuetify-nuxt-module', // Required | ||
| 'vuetify-notifier/nuxt' | ||
| ], | ||
| notifier:{ | ||
| /* module specific options */ | ||
| } | ||
| }) | ||
| ``` | ||
| :: | ||
|
|
||
| Add `VNotifierContainer` to `VMain` component of `app.vue` or `default. | ||
| vue` layout | ||
|
|
||
| ::code-group | ||
|
|
||
| ```vue [app.vue] | ||
| <template> | ||
| <VApp> | ||
| <VMain> | ||
| <!-- This is required component for dialog work --> | ||
| <VNotifierContainer /> | ||
| </VMain> | ||
| </VApp> | ||
| </template> | ||
| ``` | ||
|
|
||
| ```vue [layouts/default.vue] | ||
| <template> | ||
| <!-- ... --> | ||
| <VMain> | ||
| <!-- This is required component for dialog work --> | ||
| <VNotifierContainer /> | ||
| </VMain> | ||
| <!-- ... --> | ||
| </template> | ||
| ``` | ||
| :: | ||
|
|
||
| ## Vue Project | ||
|
|
||
| `Vuetify Notifier` only work when vuetify installed. See more [Vuetify Install guide](https://vuetifyjs.com/en/getting-started/installation/#using-laravel-mix) | ||
|
|
||
| Add `vuetify-notifier` plugin to `main.ts` and configure it: | ||
|
|
||
| ::code-group | ||
|
|
||
| ```ts [main.ts] | ||
| ... | ||
| import VuetifyNotifier from "vuetify-notifier"; | ||
|
|
||
| const vuetify = createVuetify({ | ||
| ... | ||
| }) | ||
|
|
||
| createApp(App) | ||
| .use(vuetify) // Required | ||
| .use(VuetifyNotifier) | ||
| .mount('#app') | ||
| ``` | ||
| :: | ||
|
|
||
| Add `VNotifierContainer` to `VMain` component of `App.vue` | ||
|
|
||
| ::code-group | ||
|
|
||
| ```vue [App.vue] | ||
| <template> | ||
| <!-- ... --> | ||
| <VMain> | ||
| <!-- This is required component for dialog work --> | ||
| <VNotifierContainer /> | ||
| </VMain> | ||
| <!-- ... --> | ||
| </template> | ||
| ``` | ||
| :: |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.