Use with nuxt

I install this package and:

<template>
  <no-ssr>
    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
      <vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
        <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
        X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
      </vue-draggable-resizable>
    </div>
  </no-ssr>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    VueDraggableResizable,
  },
  data () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0,
    }
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    },
  },
}
</script>

First reload of my page:

Second reload:

How can i use this package with nuxt? Tell me please.

[mauricius]

Sorry for the delay @nicothin. I made a PR to your repository fixing what I thought to be the problem. Check it out and let me know.

And I’d like to ask @mauricius to be so kind to clarify, does the plugin needs to be imported, if it already been used with Vue.use(require(‘vue-draggable-resizable’)).

@askhat actually this is not a plugin, but a component. Therefore it needs to be registered inside Vue by using the Vue.component('my-component-name', { ... }) notation.

[askhat]

@nicothin Nuxt provides an ability to plug in JS code that specifically relies on browser runtime with plugins functionality.

Shortly, you have to create a file inside the plugins directory, and call it for example vue-draggable-resizable.js. Then you need to populate it with imports and using:

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

Vue.use(VueDraggableResizable)

After file is made, all you have to is register plugin, you also have an option to forbid SSR for this plugin. Inside nuxt.config.js:

plugins: [{ src: '@plugins/vue-draggable-resizable', ssr: false }]

This is it, just make sure you do not use plugin in server side stages of component lifecycle.