{"id":16482582,"url":"https://github.com/f/vue-smart-route","last_synced_at":"2025-04-05T07:04:38.631Z","repository":{"id":33613112,"uuid":"159994864","full_name":"f/vue-smart-route","owner":"f","description":"Smart route search to make intelligent looking apps with Vue.js.","archived":false,"fork":false,"pushed_at":"2023-07-07T21:29:23.000Z","size":12259,"stargazers_count":321,"open_issues_count":26,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-12T13:10:59.548Z","etag":null,"topics":["router","vue","vue-router","vue-search","vue-smart-widget"],"latest_commit_sha":null,"homepage":"https://f.github.io/vue-smart-route","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/f.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2018-12-01T22:59:39.000Z","updated_at":"2024-04-26T14:12:34.000Z","dependencies_parsed_at":"2024-01-08T08:56:43.415Z","dependency_job_id":null,"html_url":"https://github.com/f/vue-smart-route","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fvue-smart-route","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fvue-smart-route/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fvue-smart-route/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fvue-smart-route/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f","download_url":"https://codeload.github.com/f/vue-smart-route/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299831,"owners_count":20916190,"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":["router","vue","vue-router","vue-search","vue-smart-widget"],"created_at":"2024-10-11T13:11:20.905Z","updated_at":"2025-04-05T07:04:38.612Z","avatar_url":"https://github.com/f.png","language":"JavaScript","funding_links":[],"categories":["UI Utilities [🔝](#readme)","JavaScript","Components \u0026 Libraries","UI Utilities"],"sub_categories":["UI Utilities","Routing"],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"resources/vue-smart-route.png\" width=\"300\"/\u003e\n\u003c/p\u003e\n\u003ch2 align=\"center\"\u003eMake your users dynamically navigate routes, make smart commands and queries with a single directive.\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"resources/vue-smart-route.gif\" width=\"600\"/\u003e\n\u003c/p\u003e\n\nVue Smart Route allows you to create a **query** system based on your **routes**. You can simply create a command input that creates **smart** actions, both static routes and the **async ones**:\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"resources/vue-smart-route-swapi.gif\" width=\"600\"/\u003e\n\u003c/p\u003e\n\n## Install\n\n```\nyarn add vue-smart-route\n```\n\nThen install it:\n\n```js\nimport Vue from 'vue'\nimport VueRouter from 'vue-router'\nimport VueSmartRoute from 'vue-smart-route'\n\nVue.use(VueRouter)\nVue.use(VueSmartRoute)\n```\n\n## Overview\n\nThis is a well known route in **VueRouter**:\n\n```js\nroutes: [\n  {\n    name: 'about',\n    path: '/about'\n  }\n]\n```\n\nTo make it **smart route**, just add a `smart` key:\n\n```js\nroutes: [\n  {\n    name: 'about',\n    path: '/about',\n    // Adding smart key with `matcher` and `handler` (optional)\n    smart: {\n      matcher: {\n        search: [/about/],\n        title: () =\u003e 'About us'\n      }\n    }\n  }\n]\n```\n\nThen, you need to use **`v-smart-routes`** directive to connect possible routes you asked with **`search`**:\n\n```vue\n\u003ctemplate\u003e\n  \u003cinput type=\"text\" v-model=\"search\" v-smart-routes=\"routes\"\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      search: '',\n      routes: []\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nNow, `routes` and `search` are connected each other and `routes` will be **smartly calculated** according to `search` property.\n\n\u003e Following examples are styled. **`vue-smart-route` does not contain any style or component.**\n\n\u003cimg src=\"resources/ss1.png\" width=\"400\"/\u003e\n\n[▶︎ Try in Example](https://f.github.io/vue-smart-route)\n\nYou can check `/example` to see a working example.\n\n## Passing Parameters\n\n**vue-smart-route** is simple yet powerful. You can extend your logic to **make your route smarter.**\n\nLet's create a smart `/search` route:\n\n```js\n{\n  name: 'search',\n  path: '/search',\n  component: () =\u003e import('./Search.vue'),\n  smart: {\n    matcher: {\n      // Named RegExp will be passed to the `title` function:\n      search: [/^search\\:?\\s+(?\u003cquery\u003e.+)/i],\n      title: ({ query }) =\u003e `Search about *${query}*`\n    }\n  }\n}\n```\n\n\u003cimg src=\"resources/ss2.png\" width=\"400\"/\u003e\n\n[▶︎ Try in Example](https://f.github.io/vue-smart-route)\n\nWhen you click to the link, it will be navigated to the `/search?query=how+to+be+smart`.\n\nThen you'll be able to access to the query using `$route.query.query` from your view.\n\n## Passing Optional Parameters\n\nYou can simply make your search smarter by adding more logic:\n\n```js\n{\n  name: 'mail',\n  path: '/mail',\n  component: () =\u003e import('./SendMail.vue'),\n  smart: {\n    matcher: {\n      search: [\n        /(?\u003cemail\u003e[a-zA-Z0-9.!#$%\u0026’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*)/i,\n        /(?\u003cemail\u003e[a-zA-Z0-9.!#$%\u0026’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*)\\s+(?\u003csubject\u003e\\w+)/i\n      ],\n      title({ email, subject }) {\n        if (subject) {\n          return `Send email to *${email}* with subject *${subject}*`;\n        }\n        return `Send email to *${email}*`;\n      }\n    }\n  }\n}\n```\n\n- You can pass multiple `RegExp` for search,\n- `title` gets all the named matches and may include logic.\n\n\u003cimg src=\"resources/ss3.png\" width=\"400\"/\u003e\n\n[▶︎ Try in Example](https://f.github.io/vue-smart-route)\n\nIt lists all the routes.\n\n## The Directive\n\nvue-smart-route includes only a directive that makes all the magic.\n\nDirective requires to be bound an **input with a `v-model`**, and using `v-smart-routes` you will bind results to another property.\n\nE.g. if you bind `v-smart-routes` to `results` property, it will be an array of route objects.\n\n| key | Type | Description |\n| --- | ---- | ----------- |\n| `name` | `String` | Route name, e.g. `home` |\n| `path` | `String` | Route path, e.g. `/` |\n| `title` | `String` | Route title generated by `title` function of the smart route |\n| `handler` | `Function` | A function that triggers the navigation. It can be overriden.\n\n## Customizing the `handler` behaviour\n\n`handler` navigates to page by default, but it can be changed.\n\nLet's make `email` example smarter by changing the navigation handler:\n\n```js\n{\n  name: 'mail',\n  path: '/mail',\n  component: () =\u003e import('./SendMail.vue'),\n  smart: {\n    matcher: {\n      search: [\n        /(?\u003cemail\u003e[a-zA-Z0-9.!#$%\u0026’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*)/i,\n        /(?\u003cemail\u003e[a-zA-Z0-9.!#$%\u0026’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*)\\s+(?\u003csubject\u003e\\w+)/i\n      ],\n      title({ email, subject }) {\n        if (subject) {\n          return `Send email to *${email}* with subject *${subject}*`;\n        }\n        return `Send email to *${email}*`;\n      }\n    },\n\n    // Customizing the handler\n    handler(route, next) {\n      if (route.query.subject) {\n        location.href = `mailto:${route.query.email}?subject=${\n          route.query.subject\n        }`;\n        // Calling next will continue navigation by default, you can redirect or just stop here.\n        next(route);\n        return;\n      }\n      location.href = `mailto:${route.query.email}`;\n      next(route);\n    }\n  }\n}\n```\n\nAccording to this example, you will be able to navigate your user to the mail application.\n\n## Async Route Generation (Autocomplete-like)\n\n**vue-smart-route** supports `async routes` that you can generate routes on demand, on runtime. To do that, you should use `async routes` method to matcher:\n\n```js\nsmart: {\n  matcher: {\n    search: [/swapi\\s(?\u003cquery\u003e.*)/],\n    async routes({ query }) {\n      const people = await fetch(`https://swapi.co/api/people/?search=${encodeURIComponent(query)}`).then(r =\u003e r.json())\n      return people.results.map(character =\u003e ({\n        name: 'character',\n        title: `Go to character *${character.name}*`,\n        params: { url: character.url }\n      }))\n    }\n  }\n}\n```\n\nThis will help you to generate new routes dynamically:\n\n\u003cimg src=\"resources/vue-smart-route-swapi.gif\" width=\"600\"/\u003e\n\n## i18n\n\nYou can also use `i18n` features in `vue-smart-route`:\n\n`search`, `title` and `handler` takes `ctx` parameters which you can access to current component.\n\n```js\nroutes: [\n  {\n    name: 'about',\n    path: '/about',\n    smart: {\n      matcher: {\n        search: (ctx) =\u003e {\n          switch (ctx.$i18n.locale) {\n            case 'tr':\n              return [/hakkinda/]\n            case 'en':\n            default:\n              return [/about/]\n          }\n        },\n        title: ({}, ctx) =\u003e ctx.$i18n.t('navigation.about_us')\n      },\n      handler (route, next, ctx) {\n        location.href = `https://${ctx.i18n.locale}.example.com/about`\n      }\n    }\n  }\n]\n```\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff%2Fvue-smart-route","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff%2Fvue-smart-route","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff%2Fvue-smart-route/lists"}