{"_id":"vue3-runtime-template","_rev":"3-9b4cd18594fff0e99e808408f5df01de","name":"vue3-runtime-template","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"vue3-runtime-template","version":"1.0.0","description":"Create Vue 3 components by compiling templates on the fly","main":"dist/vue3-runtime-template.umd.js","scripts":{"prepublishOnly":"npm run build","build":"microbundle index.js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/mattelen/vue3-runtime-template.git"},"keywords":["vuejs","vue3","dynamic","runtime","template"],"author":{"name":"Alex J","email":"alexjovermorales@gmail.com"},"contributors":[{"name":"Matt Elen","url":"https://github.com/mattelen"}],"license":"MIT","devDependencies":{"acorn":"^8.0.4","microbundle":"^0.11.0"},"bugs":{"url":"https://github.com/mattelen/vue3-runtime-template/issues"},"homepage":"https://github.com/mattelen/vue3-runtime-template#readme","module":"dist/vue3-runtime-template.es.js","unpkg":"dist/vue3-runtime-template.umd.js","browser":"dist/vue3-runtime-template.es.js","types":"vue3-runtime-template.d.ts","dependencies":{"vue":"^3.0.0"},"gitHead":"3809acaa0968fe91718724d8d1e9b7ff813db05a","_id":"vue3-runtime-template@1.0.0","_nodeVersion":"14.15.2","_npmVersion":"6.14.9","dist":{"integrity":"sha512-DxvIjTO/f5RaJMF4j6SWLzeJ0J+h9pPhtekx808KwMoJlVJzQt+YuWFEJdQP1VYsA5aB9QZSHw/pVkC97TmGvw==","shasum":"aaf19f2d7fb2f7bb8e2c6b28e3813dcee4115c58","tarball":"https://registry.npmjs.org/vue3-runtime-template/-/vue3-runtime-template-1.0.0.tgz","fileCount":20,"unpackedSize":37455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAbKaCRA9TVsSAnZWagAAyJkP/2a9o00rJ2l7sWVXDAQn\nENwPK0JTFFyBJx2u++8LnSw7UelIajnwjlKfo0ZnCkurtUrExOZ0uhImI/aX\n9FxPca/AcuVZQZplAYrRC6A8qCEyQrGRNc/xwolyDPsSNY+o3jucZmHMpIaI\nMeZWUhD2Fkyo7A4FdwBewtsfQX+hE8lWgDwQ0AbSIbt1Bvo3y6ZGwuVtDkft\n+/nw/FVgSvXUFtKvLisYiiTDjXqlV8AfrXkN/g4fkMTnpvmI/lDQCPAnI6az\nc4IgiBiZ4KSiN+4JkKiSSCSfXp6CP4AZrKCK4KP8vGR3OprtZSMnK1Mxtizd\n9PPXrsrZN4s3N1vMvxi3UfX5KS2AIS+fetRYNJifeu+tz1icc921hqzSyFW0\nUafQ2hcXoEiugQa09R9p03Lna1N9BhM0kVaXlYceR9Ap4F1pC05vYrqAtVhi\nJsUfp6A2ucQShVNh3SxasvJxwDC1OfMC8f8sUEfgWP2ri8VnYtO3Lx1yKOut\ncQz5Ot9msUhmoUPwwA+PrlMWS13Vwj6POauGtr1Z8JLDD07+z6cmm4MEkFTl\nKGU/XDnnYkmV1pLteNCXYr/85PVBt+4g/AwRRPxXYvvRzUFiOujGcD0BCLLy\ntriwpV0GX7/w4WaBe5SepZYdjt4KlsA6RK176JtP+a7gghsGDZk28Xqc6wah\nrMvl\r\n=kP/L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAGGfZo3TwP2OOVXAyAPDUDF48BAkIWXHbR+LNKHtNJGAiBryzrGVfI+Kv0ZZrPJBEowNI7BstP6HQEDvrJRpX01rA=="}]},"_npmUser":{"name":"mattelen","email":"mattelen+dev@gmail.com"},"directories":{},"maintainers":[{"name":"mattelen","email":"mattelen+dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-runtime-template_1.0.0_1610723993896_0.303088540454983"},"_hasShrinkwrap":false},"1.0.1":{"name":"vue3-runtime-template","version":"1.0.1","description":"Create Vue 3 components by compiling templates on the fly","main":"dist/vue3-runtime-template.umd.js","scripts":{"prepublishOnly":"npm run build","build":"microbundle index.js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/mattelen/vue3-runtime-template.git"},"keywords":["vuejs","vue3","dynamic","runtime","template"],"author":{"name":"Alex J","email":"alexjovermorales@gmail.com"},"contributors":[{"name":"Matt Elen","url":"https://github.com/mattelen"}],"license":"MIT","devDependencies":{"acorn":"^8.0.4","microbundle":"^0.11.0"},"bugs":{"url":"https://github.com/mattelen/vue3-runtime-template/issues"},"homepage":"https://github.com/mattelen/vue3-runtime-template#readme","module":"dist/vue3-runtime-template.es.js","unpkg":"dist/vue3-runtime-template.umd.js","browser":"dist/vue3-runtime-template.es.js","types":"vue3-runtime-template.d.ts","dependencies":{"vue":"^3.0.0"},"gitHead":"3809acaa0968fe91718724d8d1e9b7ff813db05a","_id":"vue3-runtime-template@1.0.1","_nodeVersion":"14.15.2","_npmVersion":"6.14.9","dist":{"integrity":"sha512-bbL3PwlUinJWjMcGrfSYibVUcfM6/ZQN+P9WkQZg+rUvDaJKdoB3GjHlhd+wkrp5WSbwEMxCxJqydA0isFsFBQ==","shasum":"7d3d543f92ba3f1594189eb286bb3237b7cf5a36","tarball":"https://registry.npmjs.org/vue3-runtime-template/-/vue3-runtime-template-1.0.1.tgz","fileCount":20,"unpackedSize":37226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCrXxCRA9TVsSAnZWagAAhCMP/jaMCDxPHFniVLXB9971\njPx2iBvTlysn5o5GgktqfUaTTNXcmWasLVBoxuxl01NcfHc8rlqoLeFKKfaF\nmLty1BQnbn3vOTjgslmFiuKfzCMGbI/Raxon9DoPArjUXMOZlbr78nHb/wWO\nV6QJsZRA9TeCY6t3nRS7mrW0f9lHBd8DYDKfokNSV+6PcyoCSFU0d6BfLrAp\n/tGSU68mLh1VAEVahrPO44cmBWKaZFmYs+TWN7+AqN0sjAtmctDpEYviqvD6\nGiIwhxQstksx1vd+zlT9gzDjOJr/z5lNm2PWkEW3BDfQxZuzari54Qc73cnh\nfrmWkgO7qsjoC7nFsi4Y8ByYDoPlnoh6rN/xstB3+YpgwDjvJavS3FF8ameX\nd/Dq3WAsMqIls3e1s06mOk0TcozHMzaDtkmy2CDZ+8pcVMRJIhzI6j3nmsmX\ntskXnUE7QLflmZXeGXnObXHmilqv4f4HaRrn/2JoUDpFV0yY+UgKs4807wKE\nJgcgqTTfi5zYPNhDWrMXmpk5Y/RKpkZku35Xx4IQHodYL6AANDbj377+/t28\nwPbZdbkMX2z+81rsO4ASIjk3BZpRSmzeDaKkTnz5l9xVlPL/Q+pzj4r349j9\nNSWalxcHdm2Z6+X9SWWepCqe+k+sDQwg2MN1exXssVwpdAhkpKXy2z8GJwC4\nLffE\r\n=xr66\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPNDu3rvNXFKqTnsjrputWgO+gjjk7tvynuya2D0O7VAiBaoow761+Rckdzeh7Eu+0DNQ+o0BbA/JYytUXu+SGDBg=="}]},"_npmUser":{"name":"mattelen","email":"mattelen+dev@gmail.com"},"directories":{},"maintainers":[{"name":"mattelen","email":"mattelen+dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-runtime-template_1.0.1_1611314672606_0.955602881819575"},"_hasShrinkwrap":false},"1.0.2":{"name":"vue3-runtime-template","version":"1.0.2","description":"Create Vue 3 components by compiling templates on the fly","main":"dist/vue3-runtime-template.umd.js","scripts":{"prepublishOnly":"npm run build","build":"microbundle index.js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/mattelen/vue3-runtime-template.git"},"keywords":["vuejs","vue3","dynamic","runtime","template"],"author":{"name":"Alex J","email":"alexjovermorales@gmail.com"},"contributors":[{"name":"Matt Elen","url":"https://github.com/mattelen"}],"license":"MIT","devDependencies":{"acorn":"^8.0.4","microbundle":"^0.11.0"},"bugs":{"url":"https://github.com/mattelen/vue3-runtime-template/issues"},"homepage":"https://github.com/mattelen/vue3-runtime-template#readme","module":"dist/vue3-runtime-template.es.js","unpkg":"dist/vue3-runtime-template.umd.js","browser":"dist/vue3-runtime-template.es.js","types":"vue3-runtime-template.d.ts","dependencies":{"vue":"^3.0.0"},"gitHead":"a3202b6762a921b19e2c49f831ec1729ccf7c597","_id":"vue3-runtime-template@1.0.2","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-oquh7JFsbL9MuPqCehOufzgONVvBCmcLWCvVgBA5VreLpNGcQSmb9Bz0g9xqQ+ufdwZGQs+T111GbRyJfPYFQA==","shasum":"0b27306d39481dad57276243ab7538050bc134aa","tarball":"https://registry.npmjs.org/vue3-runtime-template/-/vue3-runtime-template-1.0.2.tgz","fileCount":20,"unpackedSize":37606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu/7SCRA9TVsSAnZWagAARKEP/RPO3OKB2DrofFgJxv+I\n7qw6PxAbagj4X6LXJ1Z7NkcXvTvZs//PPPkQR0kxxwbtRNfcf2MWewJ0PPAj\ngTTaqhb81gkW0Gkr0gKFYfi20IiTCOISi7REONoax8y2ZbJQJaF+FOBecbkw\n2YRMFELopk5G4uOLKRDsWd4FCt1n0xNm2ZCi1d9re6fCGFQ1OhpeIRN9I+RP\n7pq8LsuxeWb8AOpMwgqzJb0uJJ7O5KjlZzeP53m9TBQ2mIpQG0Jo3m6V4FkS\n1gmgv6ExMR2a0DCst8Qbu0ye4nST6K/KCqUzeGByppiayBYyYa6xTfBTRfDL\nSwpe8fVPrVlGS/GmcyutcwXY3emHR13tC9fFn7N2IZjjKng7SbduIrg5thrP\nFbH63iIt7QHTTB1DmShqSiEfHc8qRF8Uwg2wQbdI/IXSkqqq5CsTYNS8WTNW\nGEjjgBsKDJsNlS36aBD8kJAriqbuUfg8zbVkSIBaWOzEaMAl0UxdPpBM5olK\nZyUxY7vr+aHLJPz9zarJavpDkRrdvK4ivch4KBINZSpKlFRznb3kov+IFT6q\ncnzcKah6ZXzrr4xC/0saeDOI1ve0uI+BU/o1gyRbQHzb9vvYoM4chWnkQ0SS\n5BkPQ5G7gMi7pVvPgfbmaRvHgixOaUvEw0hAoR1k5HriQMGX+xEPmONEtTte\nofNE\r\n=oNU5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD03Q0JopdVO5yZfI33KR20jqrPoLadnpYxO3BE5zJsaAIhANrLK/j+mIH7nhhBhqVrdyv2TtUUDG8pDyaoyCvH2/yl"}]},"_npmUser":{"name":"mattelen","email":"mattelen+dev@gmail.com"},"directories":{},"maintainers":[{"name":"mattelen","email":"mattelen+dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-runtime-template_1.0.2_1639710418562_0.14987340567668772"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-15T15:19:53.895Z","1.0.0":"2021-01-15T15:19:54.017Z","modified":"2022-05-23T21:22:17.460Z","1.0.1":"2021-01-22T11:24:32.726Z","1.0.2":"2021-12-17T03:06:58.689Z"},"maintainers":[{"name":"mattelen","email":"mattelen+dev@gmail.com"}],"description":"Create Vue 3 components by compiling templates on the fly","homepage":"https://github.com/mattelen/vue3-runtime-template#readme","keywords":["vuejs","vue3","dynamic","runtime","template"],"repository":{"type":"git","url":"git+https://github.com/mattelen/vue3-runtime-template.git"},"contributors":[{"name":"Matt Elen","url":"https://github.com/mattelen"}],"author":{"name":"Alex J","email":"alexjovermorales@gmail.com"},"bugs":{"url":"https://github.com/mattelen/vue3-runtime-template/issues"},"license":"MIT","readme":"# vue3-runtime-template\n\n[![npm](https://img.shields.io/npm/v/vue3-runtime-template.svg)](https://www.npmjs.com/package/vue3-runtime-template)\n\n[![npm](https://img.shields.io/npm/dm/vue3-runtime-template.svg)](https://www.npmjs.com/package/vue3-runtime-template)\n\nA Vue.js components that makes easy compiling and interpreting a Vue.js template at runtime by using a `v-html` like API.\n\nvue3-runtime-template is based off v-runtime-template but tweaked to work with Vue 3.\n\n## Motivation\n\nThis library solves the case where you get a vue-syntax template string on runtime, usually from a server. Think of a feature where you allow the user to create their own interfaces and structures. You save that as a vue template in your database, which your UI will request later. While components are pre-compiled at build time, this case isn't (since the template is received at runtime) and needs to be compiled at runtime.\n\nvue3-runtime-template compiles that template and attaches it to the scope of the component that uses it, so it has access to its data, props, methods and computed properties.\n\nThink of it as the `v-html` equivalent that also understands vue template syntax (while `v-html` is just for plain HTML).\n\n## Getting Started\n\nInstall it:\n\n```\nnpm install vue3-runtime-template\n```\n\nYou must **use the with-compiler Vue.js version**. This is needed in order to compile on-the-fly Vue.js templates. For that, you can set a webpack alias for `vue` to the correct file.\n\nFor example, if you use the [Vue CLI](https://github.com/vuejs/vue-cli), create or modify the `vue.config.js` file adding the following alias:\n\n```js\n// vue.config.js\nmodule.exports = {\n    configureWebpack: {\n      resolve: {\n        alias: {\n          vue$: 'vue/dist/vue.esm-bundler.js',\n      // ...\n```\n\nIn [Nuxt v2](http://nuxtjs.org/), open the `nuxt.config.js` file and extend the webpack config by adding the following line to the `extend` key:\n\n```js\n// nuxt.config.js\n{\n  build: {\n    extend(config, { isDev, isClient }) {\n      config.resolve.alias[\"vue\"] = \"vue.esm-bundler.js\";\n      // ...\n```\n\nIn [Nuxt v3](https://v3.nuxtjs.org/), open the `nuxt.config.js` file and extend the vite config by adding the following hook, just on client:\n\n```js\n// nuxt.config.js\n{\n (...)\n\n hooks: {\n      'vite:extendConfig': (config, { isClient, isServer }) => {\n        if (isClient) {\n          config.resolve.alias.vue = 'vue/dist/vue.esm-bundler'\n        }\n      },\n    },\n\n  (...)\n```\n\nYou can read about different bundles of Vue in the official [help guides](https://v3.vuejs.org/guide/installation.html#with-a-bundler).\n## Usage\n\nYou just need to import the `vue3-runtime-template` component, and pass the template you want:\n\n```html\n<template>\n\t<div>\n\t\t<v-runtime-template :template=\"template\"></v-runtime-template>\n\t</div>\n</template>\n\n<script>\nimport VRuntimeTemplate from \"vue3-runtime-template\";\nimport AppMessage from \"./AppMessage\";\n\nexport default {\n  data: () => ({\n    name: \"Mellow\",\n    template: `\n      <app-message>Hello {{ name }}!</app-message>\n    `\n  }),\n  components: {\n    AppMessage,\n    VRuntimeTemplate\n  }\n};\n</script>\n```\n\nThe template you pass **have access to the parent component instance**. For example, in the last example we're using the `AppMessage` component and accessing the `{{ name }}` state variable.\n\nBut you can access computed properties and methods as well from the template:\n\n```js\nexport default {\n  data: () => ({\n    name: \"Mellow\",\n    template: `\n      <div>\n        <app-message>Hello {{ name }}!</app-message>\n        <button @click=\"sayHi\">Say Hi!</button>\n        <p>{{ someComputed }}</p>\n      </div>\n\t\t`,\n  }),\n  computed: {\n    someComputed() {\n      return \"Wow, I'm computed\";\n    },\n  },\n  methods: {\n    sayHi() {\n      console.log(\"Hi\");\n    },\n  },\n};\n```\n\n## Limitations\n\nKeep in mind that the template can only access the instance properties of the component who is using it.\n\n## Comparison\n\n### vue3-runtime-template VS v-html\n\n_TL;DR: If you need to interpret only HTML, use `v-html`. Use this library otherwise._\n\nThey both have the same goal: to interpret and attach a piece of structure to a scope at runtime. The difference is, `[v-html](https://vuejs.org/v2/api/#v-html)` doesn't understand vue template syntax, but only HTML. So, while this code works:\n\n```html\n<template>\n\t<div v-html=\"template\"></div>\n</template>\n\n<script>\nexport default {\n  data: () => ({\n    template: `\n      <a href=\"/mike-page\">Go to Mike page</a>\n    `\n```\n\nthe following wouldn't since it uses the custom `router-link` component:\n\n```html\n<router-link to=\"mike-page\">Go to Mike page</router-link>\n```\n\nBut you can use vue3-runtime-template, which uses basically the same API than v-html:\n\n```html\n<template>\n\t<vue3-runtime-template :template=\"template\"></vue3-runtime-template>\n</template>\n\n<script>\nexport default {\n  data: () => ({\n    template: `\n      <router-link to=\"mike-page\">Go to Mike page</router-link>\n    `\n```\n\n### vue3-runtime-template VS dynamic components (`<component>`)\n\nDynamic components have somewhat different goal: to render a component dynamically by binding it to the `is` prop. Although, these components are usually pre-compiled. However, the goal of vue3-runtime-template can be achieved just by using the component options object form of dynamic components.\n\nIn fact, vue3-runtime-template uses that under the hood (in the render function form) along with other common tasks to achieve its goal.\n","readmeFilename":"README.md"}