vue3-marquee-slider - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "vue3-marquee-slider",
   "description": "Simple and easy-to-use component for Vue that allows you to create customizable marquees with just a few lines of code",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
@@ -6,0 +6,0 @@ "homepage": "https://vue-marquee.com/",

README.md

@@ -58,5 +58,5 @@ [![Contributors][contributors-shield]][contributors-url]
 
-### Installation and Global Usage Vue3
+### Installation
 
-To use vue3-marquee-slider in your Vue project, simply install it with npm or yarn:
+To use vue3-marquee-slider in your Vue3 project, simply install it with npm or yarn:
 * npm
@@ -72,16 +72,10 @@ ```sh
 
-In order to register a component globally, you would typically need to import the component in your main application file. This would allow you to use the component in any of your Vue templates, without having to import it separately in each individual component.
+### Component Usage Vue3
 
-```js
-import { createApp } from 'vue'
-import Vue3MarqueeSlider from 'vue3-marquee-slider';
-import 'vue3-marquee-slider/dist/style.css'
+Sometimes you will want to import the component separately in each individual component.
 
-createApp(App).use(Vue3MarqueeSlider).mount('#app')
-```
+This allows you to have more control over the component and tailor it specifically for each individual component's needs. Importing the component separately also allows for better organization and separation of concerns in your codebase.
 
-Once you have registered the component, you can use it in any of your Vue templates by using the custom element syntax:
-
 ```html
-<vue3-marquee-slider
+<marquee-slider
   id="marquee-slider"
@@ -96,9 +90,27 @@ :speed="1000"
   <img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" />
-</vue3-marquee-slider>
+</marquee-slider>
 ```
 
+```js
+import { MarqueeSlider } from 'vue3-marquee-slider';
+import '../node_modules/vue3-marquee-slider/dist/style.css'
+
+export default {
+  components: {
+    MarqueeSlider
+  }
+}
+```
+
+or inside script tag with setup
+
+```js
+import { MarqueeSlider } from 'vue3-marquee-slider';
+import '../node_modules/vue3-marquee-slider/dist/style.css'
+```
+
 With loop:
 
 ```html
-<vue3-marquee-slider
+<marquee-slider
   id="marquee-slider-loop"
@@ -113,3 +125,3 @@ :speed="1000"
   />
-</vue3-marquee-slider>
+</marquee-slider>
 ```
@@ -133,40 +145,2 @@
 
-### Component Usage
-
-Sometimes you will want to import the component separately in each individual component.
-
-This allows you to have more control over the component and tailor it specifically for each individual component's needs. Importing the component separately also allows for better organization and separation of concerns in your codebase.
-
-```html
-<vue3-marquee-slider
-  id="marquee-slider"
-  :speed="1000"
-  :width="50"
->
-  <img src="https://app.imgforce.com/images/user/zrC_1622176244_logo-black-120.png" />
-  <img src="https://app.imgforce.com/images/user/O1j_1670884991_js-logo.png" />
-  <img src="https://app.imgforce.com/images/user/Igx_1670885749_vue-logo.png" />
-  <img src="https://app.imgforce.com/images/user/TPs_1670885858_react-logo.png" />
-  <img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" />
-</vue3-marquee-slider>
-```
-
-```js
-import { Vue3MarqueeSlider } from 'vue3-marquee-slider'
-import 'vue3-marquee-slider/dist/style.css'
-
-export default {
-  components: {
-    Vue3MarqueeSlider,
-  }
-}
-```
-
-or inside script tag with setup
-
-```js
-import { Vue3MarqueeSlider } from 'vue3-marquee-slider'
-import 'vue3-marquee-slider/dist/style.css'
-```
-
 ### Available props
@@ -195,3 +169,3 @@
 ```html
-<vue3-marquee-slider
+<marquee-slider
   id="marquee-slider"
@@ -205,3 +179,3 @@ :speed="15000"
   <img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" />
-</vue3-marquee-slider>
+</marquee-slider>
 ```
@@ -212,3 +186,3 @@
 ```html
-<vue3-marquee-slider
+<marquee-slider
   id="marquee-slider-width"
@@ -223,3 +197,3 @@ :speed="10000"
   <img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" />
-</vue3-marquee-slider>
+</marquee-slider>
 ```
@@ -230,3 +204,3 @@
 ```html
-<vue3-marquee-slider
+<marquee-slider
   id="marquee-slider-space"
@@ -242,3 +216,3 @@ :space="50"
   <img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" />
-</vue3-marquee-slider>
+</marquee-slider>
 ```
@@ -249,3 +223,3 @@
 ```html
-<vue3-marquee-slider
+<marquee-slider
   id="marquee-slider-text"
@@ -260,3 +234,3 @@ :space="150"
   <span>vue3-marquee-slider</span>
-</vue3-marquee-slider>
+</marquee-slider>
 ```
@@ -267,3 +241,3 @@
 ```html
-<vue3-marquee-slider
+<marquee-slider
   id="marquee-slider-cards"
@@ -277,3 +251,3 @@ :space="50"
   <div>Some Cards</div>
-</vue3-marquee-slider>
+</marquee-slider>
 ```
@@ -284,3 +258,3 @@
 ```html
-<vue3-marquee-slider
+<marquee-slider
   id="marquee-slider-reverse"
@@ -297,3 +271,3 @@ :space="50"
   <img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" />
-</vue3-marquee-slider>
+</marquee-slider>
 ```
@@ -300,0 +274,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

24598

decreased by-4.48%

Number of lines in readme file

316

decreased by-7.6%

No dependency changes