jayeshlab / vue-resize-text Goto Github PK

Hi, I have tried to use this excellent package for a Vue3 project but now working with Quasar plugin I can't figure out how to use it in the project. As said in the docs packages can be integrated on the boot files, but it does not seem to be working on my end.

`import VueResizeText from 'vue-resize-text';
import { boot } from 'quasar/wrappers';

export default boot(({ app }) => {
app.use(VueResizeText);
});`

is it supported to use with Quasar? and if it is what are the proper steps to use. thanks!

Hi,

Is there a way to overwrite default arguments?

For example: My minFontSize should be lower than the default 16px globally.

Thanks!

If I have text in a flex container child, even if the container is set to grow, the text is set to the largest size even if it doesn't fit in the container, it is never made smaller.

I am sizing / positioning a div relative to it's parent in % values (see attached screen).

The text overflows the div. The only way to fix this is by manually changing the ratio, but I don't know in advance the length of each text.

Why isn't the text resizing properly to fit it's parent?

This library only seems to kick in after I resize the viewport, I need the initial size to be reasonable too but it always starts at minFontSize.

Are there any plans to support Vue 3.0 as the design of directives is a breaking change
https://v3.vuejs.org/guide/migration/custom-directives.html#_3-x-syntax

I've tried to create a plugin vue-resize-text.client.js
but when I apply the directive to some text, I get a warning in the console (terminal)

in ./node_modules/Vue/dist/vue.runtime.esm.js friendly-errors 18:32:57

There are multiple modules with names that only differ in casing. friendly-errors 18:32:57
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

• /Users/f/Sites/poche21/node_modules/Vue/dist/vue.runtime.esm.js
  Used by 2 module(s), i. e.
  /Users/f/Sites/poche21/node_modules/babel-loader/lib/index.js??ref--2-0!/Users/f/Sites/poche21/plugins/vue-resize-text.client.js
• /Users/f/Sites/poche21/node_modules/vue/dist/vue.runtime.esm.js
  Used by 145 module(s), i. e.
  /Users/f/Sites/poche21/node_modules/babel-loader/lib/index.js??ref--2-0!/Users/f/Sites/poche21/.nuxt/client.js

and in the browser console I have another warning:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: resize-text

(found in at components/PostTags.vue)

Any example ?
Thank you.

Hi, firstly thanks for the component, its a really cool/useful idea. However it seems that the resizing doesn't apply when you reload the page, it would be very cool if it did. I'm not sure if this is a bug or if it is intentional, just thought I'd bring it up.

Hi, I'm using this lib with Gridsome and I've got this error:

6:35:42 PM: ReferenceError: window is not defined
6:35:42 PM:     at Object.b635 (node_modules/vue-resize-text/dist/vue-resize-text.common.js:210:0)
6:35:42 PM:     at __webpack_require__ (node_modules/vue-resize-text/dist/vue-resize-text.common.js:21:0)
6:35:42 PM:     at Module.fb15 (node_modules/vue-resize-text/dist/vue-resize-text.common.js:272:0)
6:35:42 PM:     at __webpack_require__ (node_modules/vue-resize-text/dist/vue-resize-text.common.js:21:0)
6:35:42 PM:     at exports.modules.315.module.exports.1eb2.i (node_modules/vue-resize-text/dist/vue-resize-text.common.js:85:0)
6:35:42 PM:     at Object.315 (node_modules/vue-resize-text/dist/vue-resize-text.common.js:88:0)
6:35:42 PM:     at __webpack_require__ (webpack/bootstrap:25:0)
6:35:42 PM:     at Module.368 (assets/js/page--src--pages--index-vue.a5043cb5.js:1352:30)
6:35:42 PM:     at __webpack_require__ (webpack/bootstrap:25:0)
6:35:42 PM: error Command failed with exit code 1.

This is how I'm using:

<template>
<ClientOnly>
  <h1
    class="text-center text-md-left flex-column mb-4 mx-auto w-100"
    v-resize-text="{ ratio: .8, maxFontSize: '60px' }"
    v-html="content"
  />
</ClientOnly>
</template>
<script>
import ResizeText from 'vue-resize-text'

export default {
  /* ... */
  directives: {
    ResizeText
  }
}
</script>

Cloud you help me?