[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8777":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},8777,"vue-tour","pulsardev\u002Fvue-tour","pulsardev","Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.","https:\u002F\u002Fpulsardev.github.io\u002Fvue-tour",null,"Vue",2439,269,22,50,0,1,59.39,"MIT License",false,"master",true,[24,25,26],"javascript","tour","vue","2026-06-12 04:00:41","# Vue Tour\n\n[![CircleCI](https:\u002F\u002Fcircleci.com\u002Fgh\u002Fpulsardev\u002Fvue-tour\u002Ftree\u002Fmaster.svg?style=svg)](https:\u002F\u002Fcircleci.com\u002Fgh\u002Fpulsardev\u002Fvue-tour\u002Ftree\u002Fmaster)\n\n> Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js.\n> It provides a quick and easy way to guide your users through your application.\n\n[![Vue Tour](.\u002Fscreenshot.gif \"Vue Tour\")](https:\u002F\u002Fpulsardev.github.io\u002Fvue-tour\u002F)\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Something Missing?](#something-missing)\n\n## Getting Started\n\nYou can install `vue-tour` using npm or by downloading the minified build on GitHub.\n\n```\nnpm install vue-tour\n```\n\nThen import the plugin in your application entry point (typically main.js if you used vue-cli to scaffold your project) and tell Vue to use it.\nAlso don't forget to include the styles. You can add the styles provided by default or customize them to your own liking.\n\n```javascript\nimport Vue from 'vue'\nimport App from '.\u002FApp.vue'\nimport VueTour from 'vue-tour'\n\nrequire('vue-tour\u002Fdist\u002Fvue-tour.css')\n\nVue.use(VueTour)\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n```\n\nFinally put a `v-tour` component in your template anywhere in your app (usually in App.vue) and pass it an array of steps.\nThe `target` property of each step can target a DOM element in any component of your app (as long as it exists in the DOM when the concerned step pops up).\n\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv id=\"v-step-0\">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.\u003C\u002Fdiv>\n    \u003Cdiv class=\"v-step-1\">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.\u003C\u002Fdiv>\n    \u003Cdiv data-v-step=\"2\">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.\u003C\u002Fdiv>\n\n    \u003Cv-tour name=\"myTour\" :steps=\"steps\">\u003C\u002Fv-tour>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    name: 'my-tour',\n    data () {\n      return {\n        steps: [\n          {\n            target: '#v-step-0',  \u002F\u002F We're using document.querySelector() under the hood\n            header: {\n              title: 'Get Started',\n            },\n            content: `Discover \u003Cstrong>Vue Tour\u003C\u002Fstrong>!`\n          },\n          {\n            target: '.v-step-1',\n            content: 'An awesome plugin made with Vue.js!'\n          },\n          {\n            target: '[data-v-step=\"2\"]',\n            content: 'Try it, you\\'ll love it!\u003Cbr>You can put HTML in the steps and completely customize the DOM to suit your needs.',\n            params: {\n              placement: 'top' \u002F\u002F Any valid Popper.js placement. See https:\u002F\u002Fpopper.js.org\u002Fpopper-documentation.html#Popper.placements\n            }\n          }\n        ]\n      }\n    },\n    mounted: function () {\n      this.$tours['myTour'].start()\n    }\n  }\n\u003C\u002Fscript>\n```\n\nFor all individual elements you want to add a step on, make sure it can be retrieved with `document.querySelector()`. You can use any selector, an ID, a CSS class, data attributes, etc.\nOnce this is done and your steps correctly target some DOM elements of your application, you can start the tour by calling the following method.\n\n```javascript\nthis.$tours['myTour'].start()\n```\n\nFor a more detailed documentation, checkout the [docs for vue-tour](https:\u002F\u002Fgithub.com\u002Fpulsardev\u002Fvue-tour\u002Fwiki).\n\n## `before()` UI step functions\n\nIf you need to do UI setup work before a step, there's a `before` function you may include in any\u002Feach of \nyour steps. This function will get invoked before the start\u002Fnext\u002Fprevious step is rendered. The function must return a promise. The function is invoked when `start`, `nextStep`, and `previousStep` are triggered. When the promise is rejected, it will not move to the next or previous step. If the promise is resolved then it will move in the direction specified.\n\nIt's used when you need to change what's shown on the screen between steps. For example, you may want to hide\none set of menus and open a screen or you want to perform an async operation. This is especially useful in single-page applications.\n\n```javascript\nsteps: [\n  {\n    target: '#v-step-0',  \u002F\u002F We're using document.querySelector() under the hood\n    content: `Discover \u003Cstrong>Vue Tour\u003C\u002Fstrong>!`,\n    before: type => new Promise((resolve, reject) => {\n      \u002F\u002F Time-consuming UI\u002Fasync operation here\n      resolve('foo')\n    })\n  }\n]\n```\n\n## Something Missing?\n\nIf you have a feature request or found a bug, [let us know](https:\u002F\u002Fgithub.com\u002Fpulsardev\u002Fvue-tour\u002Fissues) by submitting an issue.\n","Vue Tour 是一个轻量级、简单且可自定义的引导插件，专为 Vue.js 应用设计。它通过提供快速简便的方式来引导用户了解应用的功能，支持多种样式和布局配置，允许开发者根据需要调整每一步的内容与位置。该插件基于 Popper.js 实现了灵活的定位选项，并且易于集成到任何使用 Vue 框架构建的项目中。适用于需要向新用户介绍产品特性或指导用户完成特定任务的应用场景，如软件教程、功能演示等。",2,"2026-06-11 03:19:41","top_language"]