How to use it in Vue projects

[YspCoder]

How to use it in Vue projects

[barsdeveloper]

This is a stand alone library that doesn't depend on any framework. You just need the JS part and the CSS part in your web page and it should work. There is an example in the readme.

[YspCoder]

I used two ways to dynamically input data, but the blueprint will not be displayed

1

<!-- eslint-disable vue/no-lone-template -->

<template>
  <div class="container">
    <ueb-blueprint></ueb-blueprint>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      ueCode: undefined, // 初始时未定义
    }
  },
  mounted() {
    this.$nextTick(() => {
      const fragment = document.createDocumentFragment()
      const child = document.getElementsByTagName('ueb-blueprint')[0]
      child.innerHTML = '<template>' + this.value + '</template>'
      fragment.appendChild(child)
      console.log('asdasdasdsa', child)
    })
  },
  methods: {},
}
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
  --ueb-height: 100vh;
}
</style>

2

<!-- eslint-disable vue/no-lone-template -->

<template>
  <div class="container">
    <ueb-blueprint>
      <template>{{ value }}</template>
    </ueb-blueprint>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      ueCode: undefined, // 初始时未定义
    }
  },
  methods: {},
}
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
  --ueb-height: 100vh;
}
</style>

[YspCoder]

@barsdeveloper

[barsdeveloper]

You need to have a ueb-blueprint containing a template as shown in the readme:

<ueb-blueprint>
    <template>
        ...                   
    </template>
</ueb-blueprint>

Inside the template you put your blueprint code. You can check a working example here: https://github.com/barsdeveloper/ueblueprint/blob/master/index.html

The first example does not have the correct structure, the second one does have it but the whole HTML is inside a template and template is not interpreted by the browser. If you need a template because of Vue (which I don't know) then you need to interpret first the code inside the outer template and then let the library find the ueb-blueprint. It will check what is inside the inner template.

[YspCoder]

I have reviewed the information and updated the code structure

<!-- eslint-disable vue/no-lone-template -->

<template>
  <div class="container">
    <ueb-blueprint ref="ueb"></ueb-blueprint>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      ueCode: undefined, // 初始时未定义
    }
  },
  mounted() {
    this.$nextTick(() => {
      const fragment = document.createDocumentFragment()
      const element = document.createElement('template')
      element.innerHTML = this.value
      fragment.appendChild(element)
      this.$refs.ueb.appendChild(fragment)
    })
  },
  methods: {},
}
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
  --ueb-height: 100vh;
}
</style>

Perfect compatibility

other

If you want to save data to a database need

// other code ...
mounted() {
    const script = document.createElement('script')
    script.src = 'https://ub.kkkk.dev/ueblueprint.js'
    script.type = 'module'
    document.body.appendChild(script)
    document.addEventListener('paste', this.handlePaste)
  },
  beforeDestroy() {
    document.removeEventListener('paste', this.handlePaste)
  },
  methods: {
    handlePaste(event) {
      const clipboardData = event.clipboardData || window.clipboardData
      if (clipboardData) {
        this.postForm.ueCode = clipboardData.getData('text')
      }
    },
  }

[YspCoder]

@barsdeveloper do you have a twitter account? can I add you as a friend?

[barsdeveloper]

I don't have Twitter/X Glad to hear you solved