+
+
\ No newline at end of file
diff --git a/playground/components/content/Anatomy.vue b/playground/components/content/Anatomy.vue
new file mode 100644
index 0000000..18126e7
--- /dev/null
+++ b/playground/components/content/Anatomy.vue
@@ -0,0 +1,291 @@
+
+
+
+
+
+
+
+ Philosophy
+
+
+ Headless Toasts
+
+
+
+
+
+
+ With the rising of abstracted UI libraries like
+ Tailwind CSS, a
+ lot of developers realised they don't want to be forced in some UI
+ choices anymore. Nuxt Toaster does exactly that, it ships unstyled and
+ without a UI.
+
+
+
+
+ This behavior allows any developer to create his own set of toasts
+ without having to look the same from a project to another. Nuxt
+ Toaster provides
+ Theming options
+ as well as Tailwind and plain CSS based
+ examples.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Nuxt Toaster is a toast engine, meaning that it primarily delivers
+ unstyled toast elements. Styling is done separately
+ via CSS and / or theming options.
+
+
+ If you need basic styling, Nuxt Toaster provides prebuilt
+ CSS presets that you can import into your project to
+ enable a basic set of styles.
+
+
+ As a rendering engine Nuxt Toaster can render external components that
+ can also receive data and properties from the toast container itself.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Nuxt has been installed!
+
+
+ Unstyled content
+
+
+
+
+
+
+
+
+ Nuxt has been installed!
+
+
+ Styled content
+
+
+
+
+
+
+
+
+
+
+
+ Toast icon
+
+
+
+
+ Nuxt has been installed!
+
+
+ Toast content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Important note
+
+
+ Please keep in mind that Nuxt Toaster is a
+ toast rendering engine and not a classic toasting
+ library that ships with prebuilt styles. Styles presets and custom
+ examples are provided for inspiration, so you can build your own.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/content/BasicUsage.vue b/playground/components/content/BasicUsage.vue
new file mode 100644
index 0000000..d80f520
--- /dev/null
+++ b/playground/components/content/BasicUsage.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+ Show a Toast
+
+
+ Once you've added @cssninja/nuxt-toaster to your
+ project, you can immediately start showing toasts. Please note that
+ toasts will be unstyled. Jump to the
+ theming section
+ for more details.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/content/Design.vue b/playground/components/content/Design.vue
new file mode 100644
index 0000000..2aa1c50
--- /dev/null
+++ b/playground/components/content/Design.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+ Custom Experience
+
+
+ You set the rules
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get started with the docs
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/content/ExampleAdvanced.vue b/playground/components/content/ExampleAdvanced.vue
new file mode 100644
index 0000000..6361d6c
--- /dev/null
+++ b/playground/components/content/ExampleAdvanced.vue
@@ -0,0 +1,360 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Advanced example
+
+
+ Nuxt Toaster can render completely custom UI elements. It extends the
+ Toast's role and lets it act like a popup or a dialog. The following
+ example uses
+ Tailwind CSS.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Play with the available options to customize content,
+ positionning, duration and toast colors.
+
+
+
+
+
+
+ Y Position
+
+
+
+
+
+ Top
+
+
+
+
+
+ Bottom
+
+
+
+
+
+
+
+
+ X Position
+
+
+
+
+
+ Left
+
+
+
+
+
+ Center
+
+
+
+
+
+ Right
+
+
+
+
+
+
+
+
+ Colors
+
+
+
+
+
+ Success
+
+
+
+
+
+ Info
+
+
+
+
+
+ Warning
+
+
+
+
+
+ Danger
+
+
+
+
+
+
+
+ Message
+
+
+
+
+
+
+
+
+
+ Duration (ms)
+
+
+
+
+
+
+
+
+ There are more options to customize, take look at the
+ API docs
+ section.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/content/ExampleCustom.vue b/playground/components/content/ExampleCustom.vue
new file mode 100644
index 0000000..a231408
--- /dev/null
+++ b/playground/components/content/ExampleCustom.vue
@@ -0,0 +1,355 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom example
+
+
+ Nuxt Toaster can render other vue components as toasts. Create a
+ component, style it like you want and you're ready to pass it to Nuxt
+ toaster. The following example uses
+ Tailwind CSS.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Play with the available options to customize content,
+ positionning, duration and toast colors.
+
+
+
+
+
+
+ Y Position
+
+
+
+
+
+ Top
+
+
+
+
+
+ Bottom
+
+
+
+
+
+
+
+
+ X Position
+
+
+
+
+
+ Left
+
+
+
+
+
+ Center
+
+
+
+
+
+ Right
+
+
+
+
+
+
+
+
+ Colors
+
+
+
+
+
+ Success
+
+
+
+
+
+ Info
+
+
+
+
+
+ Warning
+
+
+
+
+
+ Danger
+
+
+
+
+
+
+
+ Message
+
+
+
+
+
+
+
+
+
+ Duration (ms)
+
+
+
+
+
+
+
+
+ There are more options to customize, take look at the
+ API docs
+ section.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/content/ExamplePlain.vue b/playground/components/content/ExamplePlain.vue
new file mode 100644
index 0000000..aae0a39
--- /dev/null
+++ b/playground/components/content/ExamplePlain.vue
@@ -0,0 +1,375 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Plain CSS example
+
+
+ Nuxt Toaster provides a basic CSS stylesheet that you can import in
+ your project if you need prebuilt styles. Hit the invite button below
+ to start popping toasts.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Play with the available options to customize content,
+ positionning, duration and toast colors.
+
+
+
+
+
+
+ Y Position
+
+
+
+
+
+ Top
+
+
+
+
+
+ Bottom
+
+
+
+
+
+
+
+
+ X Position
+
+
+
+
+
+ Left
+
+
+
+
+
+ Center
+
+
+
+
+
+ Right
+
+
+
+
+
+
+
+
+ Colors
+
+
+
+
+
+ Default
+
+
+
+
+
+ Success
+
+
+
+
+
+ Info
+
+
+
+
+
+ Warning
+
+
+
+
+
+ Danger
+
+
+
+
+
+
+
+ Message
+
+
+
+
+
+
+
+
+
+ Duration (ms)
+
+
+
+
+
+
+
+
+ There are more options to customize, take look at the
+ API docs
+ section.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/content/GetStarted.vue b/playground/components/content/GetStarted.vue
new file mode 100644
index 0000000..f6a6e12
--- /dev/null
+++ b/playground/components/content/GetStarted.vue
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+ Get Started
+
+
+ Nuxt Toaster is a simple toaster (notifier) handler for Nuxt.js,
+ served as a nuxt module.Start by adding
+ @cssninja/nuxt-toaster as a dependency of your project.
+
+
+
+
+
+ Unstyled by default
+
+
+
+
+
+ Render any component as a toast
+
+
+
+
+
+ Fully customizable
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/content/Setup.vue b/playground/components/content/Setup.vue
new file mode 100644
index 0000000..544a18c
--- /dev/null
+++ b/playground/components/content/Setup.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Setup module
+
+
+ To setup the module in your Nuxt project, add
+ @cssninja/nuxt-toaster to the modules section of your
+ nuxt.config.js or nuxt.config.ts file.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/doc/Code.vue b/playground/components/doc/Code.vue
new file mode 100644
index 0000000..aaa843e
--- /dev/null
+++ b/playground/components/doc/Code.vue
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{
+ props.file
+ }}
+
+
+ {{ props.code }}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/mockup/Advanced.vue b/playground/components/mockup/Advanced.vue
new file mode 100644
index 0000000..3a92889
--- /dev/null
+++ b/playground/components/mockup/Advanced.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Jerry K.
+
+
Scrum Master
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/mockup/Basic.vue b/playground/components/mockup/Basic.vue
new file mode 100644
index 0000000..14b1e8d
--- /dev/null
+++ b/playground/components/mockup/Basic.vue
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Clarke D.
+
+
+ Software Engineer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/mockup/Custom.vue b/playground/components/mockup/Custom.vue
new file mode 100644
index 0000000..7e40052
--- /dev/null
+++ b/playground/components/mockup/Custom.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Anna L.
+
+
Sales Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/shims.d.ts b/playground/components/shims.d.ts
new file mode 100644
index 0000000..572d476
--- /dev/null
+++ b/playground/components/shims.d.ts
@@ -0,0 +1 @@
+declare module 'vue-prism-component'
\ No newline at end of file
diff --git a/playground/components/toast/ActionButtons.vue b/playground/components/toast/ActionButtons.vue
new file mode 100644
index 0000000..896a88c
--- /dev/null
+++ b/playground/components/toast/ActionButtons.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/toast/Advanced.vue b/playground/components/toast/Advanced.vue
new file mode 100644
index 0000000..6b23e35
--- /dev/null
+++ b/playground/components/toast/Advanced.vue
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
+
Jerry K.
+
Scrum Master
+
+
+
+ Jerry is a talented Scrum Master looking for new opportunities.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ props.message }}
+
+
+
+
+
+ State
+
{{ state }}
+
+
+ Duration
+
{{ { percent, closeIn, endAt } }}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/toast/Custom.vue b/playground/components/toast/Custom.vue
new file mode 100644
index 0000000..69d5ce5
--- /dev/null
+++ b/playground/components/toast/Custom.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+ {{ props.title }}
+ {{ props.message }}
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/toast/IconDanger.vue b/playground/components/toast/IconDanger.vue
new file mode 100644
index 0000000..42c7647
--- /dev/null
+++ b/playground/components/toast/IconDanger.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Something went wrong!
+
+
\ No newline at end of file
diff --git a/playground/components/toast/IconSoloDanger.vue b/playground/components/toast/IconSoloDanger.vue
new file mode 100644
index 0000000..cc15a44
--- /dev/null
+++ b/playground/components/toast/IconSoloDanger.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Fire alert
+ Get out of here fast!
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/toast/IconSuccess.vue b/playground/components/toast/IconSuccess.vue
new file mode 100644
index 0000000..c7b620b
--- /dev/null
+++ b/playground/components/toast/IconSuccess.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+ Your changes were saved!
+
+
\ No newline at end of file
diff --git a/playground/components/toast/LabelInfo.vue b/playground/components/toast/LabelInfo.vue
new file mode 100644
index 0000000..83bc682
--- /dev/null
+++ b/playground/components/toast/LabelInfo.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ Your changes were saved!
+
+
+
\ No newline at end of file
diff --git a/playground/components/toast/LabelSuccess.vue b/playground/components/toast/LabelSuccess.vue
new file mode 100644
index 0000000..dbe516d
--- /dev/null
+++ b/playground/components/toast/LabelSuccess.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Nuxt has been installed!
+
+
+
\ No newline at end of file
diff --git a/playground/components/toast/LabelWarning.vue b/playground/components/toast/LabelWarning.vue
new file mode 100644
index 0000000..1406608
--- /dev/null
+++ b/playground/components/toast/LabelWarning.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Power level is critical!
+
+
+
\ No newline at end of file
diff --git a/playground/components/toast/UserLikeClose.vue b/playground/components/toast/UserLikeClose.vue
new file mode 100644
index 0000000..133486c
--- /dev/null
+++ b/playground/components/toast/UserLikeClose.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Aaron S.
+ Liked your reply
+
+
+
+
\ No newline at end of file
diff --git a/playground/components/toast/UserReplyClose.vue b/playground/components/toast/UserReplyClose.vue
new file mode 100644
index 0000000..3a3b17d
--- /dev/null
+++ b/playground/components/toast/UserReplyClose.vue
@@ -0,0 +1,37 @@
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+