{"id":14024682,"url":"https://github.com/shipshapecode/vue-shepherd","last_synced_at":"2025-11-08T16:30:40.689Z","repository":{"id":34806908,"uuid":"169820542","full_name":"shipshapecode/vue-shepherd","owner":"shipshapecode","description":"A Vue wrapper for the site tour library Shepherd","archived":false,"fork":false,"pushed_at":"2025-02-10T10:25:43.000Z","size":3597,"stargazers_count":312,"open_issues_count":8,"forks_count":25,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-02-16T01:55:50.186Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/shipshapecode.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"rwwagner90"}},"created_at":"2019-02-09T01:26:48.000Z","updated_at":"2025-02-10T10:25:39.000Z","dependencies_parsed_at":"2023-01-16T23:15:34.303Z","dependency_job_id":"37d99752-5d06-40d0-8ca3-f525b632e99c","html_url":"https://github.com/shipshapecode/vue-shepherd","commit_stats":{"total_commits":178,"total_committers":5,"mean_commits":35.6,"dds":0.2134831460674157,"last_synced_commit":"dc9465d1a3736b0e7066dc26569099a6473bd581"},"previous_names":["shepherd-pro/vue-shepherd","shipshapecode/vue-shepherd"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipshapecode%2Fvue-shepherd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipshapecode%2Fvue-shepherd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipshapecode%2Fvue-shepherd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipshapecode%2Fvue-shepherd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shipshapecode","download_url":"https://codeload.github.com/shipshapecode/vue-shepherd/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239077459,"owners_count":19577668,"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":[],"created_at":"2024-08-11T16:00:18.014Z","updated_at":"2025-11-08T16:30:40.627Z","avatar_url":"https://github.com/shipshapecode.png","language":"Vue","readme":"# vue-shepherd\n\n\u003ca href=\"https://shipshape.io/\"\u003e\u003cimg src=\"http://i.imgur.com/DWHQjA5.png\" alt=\"Ship Shape\" width=\"100\" height=\"100\"/\u003e\u003c/a\u003e\n\n**[vue-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project](https://shipshape.io/)**.\n\n[![npm version](https://badge.fury.io/js/vue-shepherd.svg)](http://badge.fury.io/js/vue-shepherd)\n![Download count all time](https://img.shields.io/npm/dt/vue-shepherd.svg)\n[![npm](https://img.shields.io/npm/dm/vue-shepherd.svg)]()\n[![CI Build](https://github.com/shipshapecode/vue-shepherd/actions/workflows/main.yml/badge.svg)](https://github.com/shipshapecode/vue-shepherd/actions/workflows/main.yml)\n\nThis is a Vue wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site tour, library.\n\n```bash\nnpm install vue-shepherd --save\n```\n\n## Usage\n\n### Composition API (suggested)\n\nFirst, in your `main.js`, import the styles\n\n```js\nimport 'shepherd.js/dist/css/shepherd.css'\n```\nThen, use shepherd in your components:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv ref=\"el\"\u003e\n    Testing\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { ref, onMounted } from 'vue'\n  import { useShepherd } from 'vue-shepherd'\n\n  const el = ref(null);\n\n  const tour = useShepherd({\n    useModalOverlay: true\n  });\n  \n  onMounted(() =\u003e  {\n    tour.addStep({\n      attachTo: { element: el.value, on: 'top' },\n      text: 'Test'\n    });\n\n    tour.start();\n  });\n\u003c/script\u003e\n```\n\n### Option API\n\nTo use vue-shepherd with Option API you have to install the plugin which will add the '$shepherd' function to your vue app.\n\n```js\nimport { createApp } from 'vue';\nimport VueShepherdPlugin from 'vue-shepherd';\nimport '~shepherd.js/dist/css/shepherd.css';\n\ncreateApp().use(VueShepherdPlugin).mount('#app');\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv ref=\"el\"\u003e\n    Testing\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { defineComponent } from 'vue'\n\n  export default defineComponent({\n    data(){\n      return {\n        tour: null\n      }\n    },\n\n    methods: {\n      createTour(){\n        this.tour = this.$shepherd({\n          useModalOverlay: true\n        });\n\n        this.tour.addStep({\n          attachTo: { element: this.$refs.el, on: 'top' },\n          text: 'Test'\n        });\n      }\n    },\n\n    mounted(){\n      this.createTour();\n      this.tour.start();\n    }\n  });\n\u003c/script\u003e\n```\n\n## SSR\nFor server side rendering project, you should import the `vue-shepherd.ssr.js` file.\n\n```js\nimport VueShepherd from 'vue-shepherd/dist/vue-shepherd.ssr.js';\n```\n\n## Directives\n\nWIP\n","funding_links":["https://github.com/sponsors/rwwagner90"],"categories":["Vue","Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshipshapecode%2Fvue-shepherd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshipshapecode%2Fvue-shepherd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshipshapecode%2Fvue-shepherd/lists"}