📝 docs: add documentation for the nomargin and scale props

docs/components/content/ScaleExample.vue

@@ -0,0 +1,21 @@
+<template>
+  <ClientOnly>
+    <Vue3Lottie
+      animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
+      :height="200"
+      :width="200"
+    />
+    <Vue3Lottie
+      animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
+      :height="200"
+      :width="200"
+      :scale="2"
+    />
+    <Vue3Lottie
+      animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
+      :height="200"
+      :width="200"
+      :scale="3"
+    />
+  </ClientOnly>
+</template>

docs/content/1.introduction/1.installation.md

@@ -29,7 +29,7 @@ pnpm add vue3-lottie@latest
 ::
 
 ::alert{type="warning"}
-If you upgrading from v2 to v3, please remove the `dist/style.css` import from your project. This css is now imported automatically by the plugin. For more information, see [Migrating from v2 to v3](/introduction/v3).
+If you are upgrading from v2 to v3, please remove the `dist/style.css` import from your project. This css is now imported automatically by the plugin. For more information, see [Migrating from v2 to v3](/introduction/v3).
 ::
 
 ::alert{type="success"}

docs/content/1.introduction/2.vue-3.md

@@ -1,7 +1,7 @@
 # Usage with Vue 3
 
 ::alert{type="warning"}
-If you upgrading from v2 to v3, please remove the `dist/style.css` import from your main.js or main.ts file. This css is now imported automatically by the plugin.
+If you are upgrading from v2 to v3, please remove the `dist/style.css` import from your main.js or main.ts file. This css is now imported automatically by the plugin.
 ::
 
 ## Register the component

docs/content/2.api/1.props.md

@@ -148,6 +148,33 @@ A prop to change the background color of the container. This will be passed dire
 | ------ | ------------- | -------- | ------------------------------------------ |
 | String | `transparent` | no       | Any valid CSS color or hex based rgb value |
 
+## `noMargin` :badge[New]{type="success"}
+
+Currently the lottie animation has a auto margin applied to it to center it in the container. This prop will remove that margin. This is useful if you want better control over the positioning of the animation without needing to override the margin via css.
+
+| Type    | Default value | Required | Accepted values   |
+| ------- | ------------- | -------- | ----------------- |
+| Boolean | `false`       | no       | `true` or `false` |
+
+## `scale` :badge[New]{type="success"}
+
+Have you ever found a lottie animation that is perfect for your project but it is too big or too small? Now you can use the `scale` prop to scale the animation to the ratio that you want.
+
+| Type   | Default value | Required | Accepted values |
+| ------ | ------------- | -------- | --------------- |
+| Number | `1`           | no       | `Number > 0`    |
+
+[scaling demo](/examples#using-the-scale-prop)
+
+:::alert{type="info"}
+This prop will do the scale from the center of the animation.
+This prop will also ONLY scale the svg inside the container. It will not scale the container itself. You should use the `width` and `height` props to change the size of the container.
+:::
+
+:::alert{type="warning"}
+There is a chance that the animation could be blurry with this prop due to a downstream process for how the lottie animation is rendered. Verify that the animation looks okay when using this prop. For most animations this should not be an issue since they are vector based.
+:::
+
 ## `assetsPath`
 
 Use this prop if your lottie animation needs to load assets from a different path. This is useful if you are using a CDN to host your assets. Refer to the [examples section](/examples#using-a-custom-assets-path) for a demo on how to use this prop.

docs/content/3.examples.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 # Examples
 
 Some examples of how to use the library are shown below.
@@ -121,6 +122,39 @@ You can set the `direction` to `alternate` to reverse the animation at the end o
    ::
 ::
 
+## Using the `scale` prop
+
+If you have an animation that is too big or too small, you can use the `scale` prop to scale the animation. This is only on the internal canvas and does not affect the size of the container.
+
+::code-group
+   ::code-block{label="Preview" preview}
+    ::scale-example
+    ::
+   ::
+   ::code-block{label="Code"}
+    ```vue
+    <template>
+        <Vue3Lottie
+            animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
+            :height="200"
+            :width="200"
+        />
+        <Vue3Lottie
+            animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
+            :height="200"
+            :width="200"
+            :scale="2"
+        />
+        <Vue3Lottie
+            animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
+            :height="200"
+            :width="200"
+            :scale="3"
+        />
+    </template>
+    ```
+   ::
+::
 
 ## Using the `pauseOnHover` prop
 

docs/package.json

@@ -19,6 +19,6 @@
     "nuxt": "^3.5.3"
   },
   "dependencies": {
-    "vue3-lottie": "3.0.0"
+    "vue3-lottie": "3.1.0-beta.0"
   }
 }

docs/yarn.lock

@@ -8360,10 +8360,10 @@ vue-template-compiler@^2.7.14:
     de-indent "^1.0.2"
     he "^1.2.0"
 
-vue3-lottie@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/vue3-lottie/-/vue3-lottie-3.0.0.tgz#371c2187481c493ed145f385d9ba6477ea0e3836"
-  integrity sha512-1HZhpKyqlj5jOwO2JTERJOXuJBYqnz/wnkeHjAmn7yI95ize62XQImP226/0G3+c5T3Oj//vIwyMJ2Zhsd8fwg==
+vue3-lottie@3.1.0-beta.0:
+  version "3.1.0-beta.0"
+  resolved "https://registry.yarnpkg.com/vue3-lottie/-/vue3-lottie-3.1.0-beta.0.tgz#6cab4ae0471be02ea88d414ab59ae77d26b23ff5"
+  integrity sha512-wgtLV0K8RpjM19Xx6VDUQB1M7i2peJio/7b5j9Px346A39mqCG8kfp+4tdA5MIPWqUDdvNUyK+QjtyG1elitvA==
   dependencies:
     lodash-es "^4.17.21"
     lottie-web "5.12.2"