ERROR [Vue warn]: Error in render: "TypeError: _openBlock is not a function"

[Kelvin Chidothi]

l installed the package using yarn in Nuxt.js and just tried any icon component and it's pulling up that error, trace

node_modules/@heroicons/vue/24/solid/BeakerIcon.jsopen in editor
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = require("vue")

module.exports = function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    "aria-hidden": "true"
  }, [

[Jonathan Reinink]

Hey! It looks like this is the same error as #229. The issue is caused by using the @heroicons/vue library in a Vue 2 project. This project only supports Vue 3 at this time.

You can still use Heroicons in your Vue 2 project though! All the icons are just SVGs, so you can copy and paste them into your project as needed. You just won't be able to use this Vue library version of them.

Hope that helps! 👍