{"id":15454682,"url":"https://github.com/kuroda/vue-remote-template","last_synced_at":"2025-10-15T14:55:07.085Z","repository":{"id":21387923,"uuid":"92631331","full_name":"kuroda/vue-remote-template","owner":"kuroda","description":"A Vue.js mixin to fetch template via Ajax","archived":false,"fork":false,"pushed_at":"2022-12-04T08:06:00.000Z","size":721,"stargazers_count":10,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T00:53:18.489Z","etag":null,"topics":["ajax","mixin","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kuroda.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-28T00:25:29.000Z","updated_at":"2024-05-26T00:54:35.000Z","dependencies_parsed_at":"2023-01-11T21:11:38.224Z","dependency_job_id":null,"html_url":"https://github.com/kuroda/vue-remote-template","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuroda%2Fvue-remote-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuroda%2Fvue-remote-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuroda%2Fvue-remote-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuroda%2Fvue-remote-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kuroda","download_url":"https://codeload.github.com/kuroda/vue-remote-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249834785,"owners_count":21331988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","mixin","vuejs2"],"created_at":"2024-10-01T22:04:48.713Z","updated_at":"2025-10-15T14:55:02.033Z","avatar_url":"https://github.com/kuroda.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-remote-template\n\nA Vue.js mixin to fetch template via Ajax\n\n[![npm version](https://badge.fury.io/js/vue-remote-template.svg)](https://badge.fury.io/js/vue-remote-template)\n\n## Synopsis\n\n```html\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003cscript src=\"/app.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\n// app.js\nimport Vue from \"vue/dist/vue.esm\"\nimport VueRemoteTemplate from \"vue-remote-template\"\n\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e {\n  new Vue({\n    mixins: [ VueRemoteTemplate ],\n    el: \"#app\",\n    data: {\n      templatePath: \"/hello\"\n    }\n  })\n})\n```\n\nThe above code fetches an HTML fragment from `/hello` via Ajax.\nWe call this _remote template_.\nRemote templates are compiled into Vue templates, and are used\nto construct a DOM tree onto the target`\u003cdiv\u003e` element.\n\n## Form Input Bindings\n\nWhen a remote template is fetched, a Vue component gets created dynamically.\n\nAnd if the remote templates contain `v-model` directives,\nthe component's data is initialized using the `getInitialData` function\nof [vue-data-scooper](https://www.npmjs.com/package/vue-data-scooper) package.\n\n```html\n\u003cform\u003e\n  \u003cinput type=\"text\" name=\"user[name]\" v-model=\"user.name\" value=\"Alice\"\u003e\n\u003c/form\u003e\n```\n\nThe above remote template sets the component's `user.name` property to the\nstring \"Alice\".\n\n## Initial Data\n\nThe response date from the backend server can be a string or a JSON data.\n\nIn the former case, the string will be interpreted as the remote template.\n\nIn the latter case, the JSON data should have `template` key and optional `data` key.\nThe value of `template` key will be interpreted as the remote template.\nThe value of `data` key will be used as the initial data of Vue component.\n\nFor example, when the server returns the following JSON data:\n\n```json\n{\n  \"template\": \"\u003cdiv\u003e{{ message }}\u003c/div\u003e\",\n  \"data\": { \"message\": \"Hello, world!\" }\n}\n```\n\nThen, the resultant HTML fragment will be `\u003cdiv\u003eHello, world!\u003c/div\u003e`.\n\nNote that the initial data provided by the JSON data from the server overwrites\nthe data set by the `v-model` directives.\n\n## Extensions\n\nIf you want to initialize the component's properties that are not bound to\na input via `v-model` directive,\nyou must provide an _extension_.\n\n```javascript\n// greeting.js\nexport const greeting = {\n  data: function() {\n    return {\n      name: \"Alice\"\n    }\n  }\n}\n```\n\nAn extension is a _mixin_ to be used when the component is created.\n\nYou can register extensions to the `extensions` property.\n\n```javascript\n// app.js\nimport Vue from \"vue/dist/vue.esm\"\nimport VueRemoteTemplate from \"vue-remote-template\"\nimport { greeting } from \"./greeting\"\n\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e {\n  new Vue({\n    mixins: [ VueRemoteTemplate ],\n    el: \"#app\",\n    data: {\n      templatePath: \"/hello\",\n      extensions: {\n        greeting: greeting\n      }\n    }\n  })\n})\n```\n\nThe name of extension must be specified by the `data-extension` attribute of\nthe root element of remote template:\n\n```html\n\u003cdiv data-extension=\"greeting\"\u003e\n  \u003cdiv\u003eHello, {{name}}!\u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe above template produces the following HTML fragment:\n\n```html\n\u003cdiv data-extension=\"greeting\"\u003e\n  \u003cdiv\u003eHello, Alice!\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## `visit` method\n\nYou can call the `visit` method to switch the remote template.\n\n```html\n\u003cdiv\u003e\n  \u003cbutton type=\"button\" @click=\"visit('/goodbye')\"\u003eClick me!\u003c/button\u003e\n\u003c/div\u003e\n```\n\nWhen the user clicks on this button on the browser,\nan Ajax access to `/goodbye` is executed and a remote template gets fetched.\n\nIf a newly fetched template's root element has the `data-title` attribute,\nits value is set to the document title.\n\nAnd, a newly fetched template's root element has the `data-url` attribute,\nits value is used to add an entry to the browser's history using\n[window.history.pushState()](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method) method.\n\nHere is an example of remote template:\n\n```html\n\u003cdiv data-extension=\"greeting\" data-title=\"Farewell\" data-url=\"/bye\"\u003e\n  \u003cdiv\u003eGoodbye, {{name}}!\u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf you use the `visit` method on an `a` element, you can omit argument to the method.\nThe `href` value of the `a` element is interpreted as the remote template path.\n\n```html\n\u003cdiv\u003e\n  \u003ca href=\"/goodbye\" @click.prevent=\"visit\"\u003eClick me!\u003c/a\u003e\n\u003c/div\u003e\n```\n\nNote that you must _prevent_ the default action so that the browser does not\nvisit the specified path actually.\n\n## `submit` method\n\nYou can call the `submit` method to submit form data via Ajax call.\n\n```html\n\u003cform action=\"/users/123\" method=\"post\" @submit.prevent=\"submit\"\u003e\n  \u003cinput type=\"hidden\" name=\"_method\" value=\"patch\"\u003e\n  \u003cinput type=\"text\" name=\"user[name]\" v-model=\"user.name\" value=\"Alice\"\u003e\n  \u003cinput type=\"submit\" value=\"Update\"\u003e\n\u003c/form\u003e\n```\n\nWhen the user clicks on the \"Update\" button, an Ajax request via `PATCH` method\nis submitted to the `/users/123`.\n\nIf the server returns a text, it is used as remote template to show the result.\nIf the server returns a JSON object, it must contain the `templatePath` key,\nwhose value is used to make another Ajax request in order to fetch a remote template.\n\nNote that the `submit` method must be called on the `\u003cform\u003e` element.\nYou cannot call it on the elements within a form.\n\nAlso note that the _method_ of Ajax call is determined by the value of a\nhidden element whose name is `_method`.\n\n## Demo\n\nSee https://github.com/kuroda/vue-rails-form-builder-demo.\n\n## Development Setup\n\n```bash\n# install dependencies\nyarn install\n\n# test\nyarn test\n```\n\nYou need the Google Chrome version 59 or higher to run test.\nIf you use `google-chrome-beta`, export `CHROME_BIN` environment variable:\n\n```bash\nexport CHROME_BIN=$(which google-chrome-beta)\n```\n\n## Building for distribution\n\n```bash\nyarn build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuroda%2Fvue-remote-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuroda%2Fvue-remote-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuroda%2Fvue-remote-template/lists"}