A storybook decorator that allows you to use routing-aware components in your stories

Last update: Aug 13, 2022

storybook-router

A Storybook decorator that allows you to use your routing-aware components. You can simply use the library link component within your story or you can write a real prototype of your application using StoryRouter in conjunction with the story links addon.

The decorator currently supports react-router v4 / v5 and vue-router v2 / v3.

For more information, please refer to the specific documentation for using with react-router or using with vue-router.

GitHub

https://github.com/gvaldambrini/storybook-router
Comments
  • 1. React 16

    After feedback in the previous PR I've created a new branch off master,

    • To me Resolving to RR3 and RR4 in a single version of this library comes with a whole bunch of complexity.
      • we have to use different scripts to run the storybook in different modes.
      • we also have to write imperative logic to check for null exports from react router to determine what version we're running with.

    This PR removes support for V3 of RR and also adds React 16 support.

    Reviewed by export-mike at 2017-12-11 01:37
  • 2. Support for vue-router

    Now that Storybook supports Vue, does this project have any interest in supporting vue-router?

    Link: https://github.com/vuejs/vue-router

    Related: https://github.com/storybooks/storybook/issues/1657

    Reviewed by JanCVanB at 2017-09-08 22:28
  • 3. Customize router

    Hi, sometimes is useful to customize the router instance (I customize forward and back methods for example). Adding a third decorator parameter this is possible. Thank you for your useful decorator! Best regards.

    Reviewed by mgesmundo at 2018-01-11 23:26
  • 4. router v3 support

    great work with the plugin. i've really found it helpful in projects where i can use router v4.

    however, i still maintain several projects that are not able to update to v4 yet. i'd love to be able to use this with those projects.

    any chance you'd be open to adding support for router v3?

    Reviewed by travi at 2017-05-05 04:03
  • 5. Warning during install with `storybook/addons` ^4.0.0-alpha.25 [0.3.4]

    Issue:

    Which version are you using?

    [email protected]

    Are you using storybook-router with a react based project or a vue one?

    React

    Please describe the problem:

    During install warning displayed: "storybook-router > @storybook/[email protected]" has incorrect peer dependency "@storybook/[email protected]^3.3.0".

    Please explain how to reproduce the issue or (better) provide an example to do it.

    After Webpack 4 and Babel 7 update, storybook update was also necessary but it seems that the storybook-router give a warning on this one

    Version:

    "@storybook/addons": "^4.0.0-alpha.25",
    
    Reviewed by PeterMK85 at 2018-10-15 08:15
  • 6. Is it possible to avoid clash with info addon?

    Issue:

    Which version are you using?

    CNA

      "devDependencies": {
        "@storybook/addon-actions": "^3.4.10",
        "@storybook/addon-info": "^3.4.10",
        "@storybook/addon-knobs": "^3.4.10",
        "@storybook/addon-links": "^3.4.10",
        "@storybook/react": "^3.4.10",
        "apollo-cache-inmemory": "^1.3.0-beta.6",
        "apollo-client": "^2.3.7",
        "apollo-link": "^1.2.2",
        "apollo-link-http": "^1.5.4",
        "apollo-storybook-react": "^0.1.5",
        "babel-eslint": "^8.2.6",
        "babel-preset-env": "^1.7.0",
        "babel-register": "^6.26.0",
        "color": "^3.0.0",
        "cross-fetch": "^2.2.1",
        "eslint": "^4.19.1",
        "eslint-config-airbnb": "17.0.0",
        "eslint-config-prettier": "^2.9.0",
        "eslint-plugin-import": "^2.12.0",
        "eslint-plugin-jsx-a11y": "^6.0.3",
        "eslint-plugin-prettier": "^2.6.2",
        "eslint-plugin-react": "^7.9.1",
        "graphql": "^0.13.2",
        "graphql-tag": "^2.9.2",
        "luxon": "^1.3.0",
        "postcss-syntax": "^0.3.1",
        "query-string": "5",
        "react-app-rewire-styled-components": "^3.0.2",
        "react-app-rewired": "^1.5.2",
        "react-slick": "^0.23.1",
        "react-styled-flexboxgrid": "^2.4.0",
        "react-window-size": "^1.2.0",
        "recompose": "^0.28.0",
        "storybook-react-router": "^1.0.1",
        "styled-components": "^3.3.3",
        "styled-normalize": "^4.0.0",
        "stylelint": "^9.3.0",
        "stylelint-config-recommended": "^2.1.0",
        "stylelint-config-styled-components": "^0.1.1",
        "stylelint-processor-styled-components": "^1.3.1"
      },
    

    Are you using storybook-router with a react based project or a vue one?

    react

    Please describe the problem:

    I am using the info addon to see prop information etc.

    using the storybook-react decorator and I unfortunately see the router props instead of the underlying component's props:

    import React from 'react';
    import StoryRouter from 'storybook-react-router';
    import { storiesOf } from '@storybook/react';
    
    import HealthGauge from './index';
    
    import ChromeLayout from 'components/common/ChromeLayout';
    
    storiesOf('HealthGauge', module)
      .addDecorator(StoryRouter())
      .add('default', () => (
        <ChromeLayout>
          <HealthGauge />
        </ChromeLayout>
      ));
    
    
    

    should be something like this:

    screen shot 2018-08-11 at 11 09 59 pm

    but I see this: screen shot 2018-08-11 at 11 07 54 pm

    Please explain how to reproduce the issue or (better) provide an example to do it.

    config

    import React from 'react';
    import { configure, addDecorator } from '@storybook/react';
    import { ThemeProvider } from 'styled-components';
    import theme from '../src/lib/theme';
    import { withInfo } from '@storybook/addon-info';
    import { withKnobs } from '@storybook/addon-knobs';
    import StoryRouter from 'storybook-react-router';
    
    const req = require.context('../src', true, /stories\.(js)$/);
    
    function loadStories() {
      req.keys().forEach(req);
    }
    
    addDecorator((story, context) => withInfo()(story)(context));
    //addDecorator((story, context) => withKnobs(story)(context));
    addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>);
    //addDecorator(StoryRouter());
    
    configure(loadStories, module);
    
    
    Reviewed by acomito at 2018-08-12 03:11
  • 7. Fail on hot reload

    Hi,

    Which version are you using?

    1.0.1

    Are you using storybook-router with a react based project or a vue one?

    React

    Please describe the problem:

    I get the dreadly You should not use <Link> outside a <Router> on hot reload. It does work however if I manually refresh the page. So the decorator seems to be incorrectly applied.

    Please explain how to reproduce the issue or (better) provide an example to do it.

    config.js

    import { configure } from "@storybook/react";
    import "./decorators";
    
    const req = require.context("../src", true, /stor(ies|y)\.js$/);
    
    function loadStories() {
      req.keys().forEach(filename => req(filename));
    }
    
    configure(loadStories, module);
    

    decorators.js

    import React from "react";
    import { addDecorator } from "@storybook/react";
    import StoryRouter from "storybook-react-router";
    import "semantic-ui-css/semantic.min.css";
    
    // add
    addDecorator(StoryRouter());
    
    Reviewed by eric-burel at 2018-05-07 13:38
  • 8. Non-Vue projects shouldn't need to pull in Vue as a required dependency

    Which version are you using?

    0.3.2

    Are you using storybook-router with a react based project or a vue one?

    React

    Please describe the problem:

    I am working on a project that just uses React. As such, I have no use for having Vue as a dependency.

    Unfortunately, my Yarn package manager will pull in vue as a dependency regardless, since it is a dependency in storybook-router's package.json file. I now have vue in my project's node_modules, despite the fact that there's no way my react project will ever use that library. I wonder if it makes more sense to have vue specified as a peer dependency in package.json. That way, it is up to the app that uses storybook-router to determine whether vue should actually be installed into node_modules as a dependency.

    I feel like the same can be said in vice-versa: an app that only uses vue will have no reason to pull in react as a dependency.

    Reviewed by ecbrodie at 2018-02-15 03:23
  • 9. Broken width after opening component with router

    If you open component with router and then open another component in Storybook, width of page becomes smaller each time you open component with router decorator

    Reviewed by goodmind at 2017-10-30 17:13
  • 10. Add support for Storybook 5

    Right now when installing this addon with storybook 5 you get this warning in yarn:

    warning " > [email protected]" has incorrect peer dependency "@storybook/[email protected]^4.0.0".
    warning " > [email protected]" has unmet peer dependency "@storybook/[email protected]^4.0.0".
    

    It seems like the addon works fine in SB5 so should be fine to bump the dependency to ^4.0.0||^5.0.0.

    Reviewed by jamesmoss at 2019-03-13 18:20
  • 11. location did not match any routes

    i expect that this is user error, but i'm struggling to find my problem, so i'm hoping you have something that you can point me to.

    i'm using this with react-router v3 and passing my linkTo definitions as the first argument to the storyRouter decorator as

    .addDecorator(storyRouter({
        '/companies': linkTo('Organisms/Companies List', 'default')
      }))
    

    however, when i click on the <Link> that points to /companies i get the following error:

    Warning: [react-router] Location "/companies" did not match any routes
    

    this then results in the following trace:

    Uncaught TypeError: Cannot read property 'emit' of null
        at Object.eval [as /companies] (preview.js?e884:22)
        at HistoryWatcher.onHistoryChanged (StoryRouter.js?b7c2:202)
        at eval (useQueries.js?c2b7:75)
        at eval (useBasename.js?bfcd:67)
        at eval (createHistory.js?96f2:55)
        at Array.forEach (<anonymous>)
        at updateLocation (createHistory.js?96f2:54)
        at eval (createHistory.js?96f2:117)
        at eval (createHistory.js?96f2:90)
        at next (AsyncUtils.js?f52d:51)
    

    my assumption is that the "did not match any routes" error shouldn't occur since i defined that route in the decorator? should i be configuring that in a different way?

    i'm using v0.2.9 of storybook-router

    Reviewed by travi at 2017-08-22 21:16
  • 12. Providing route params and query params to components

    Issue:

    Which version are you using?

    1.0.8

    Are you using storybook-router with a React based project or a Vue one?

    React based project

    Please describe the problem:

    I would like to set a route for my component, which uses a route parameter for fetching data (which is intercepted and a response mocked using msw-storybook-addon)

    Please explain how to reproduce the issue or (better) provide an example to do it.

    Context

    I have a React component which extracts a route parameters and queries and uses them to fetch my api.

    const Details = () => {
      const client = useAxiosAuth(); // Custom axios client hook
      const history = useHistory(); // History hook provided by react router
      const location = useLocation(); // Hook provided by react-router
    
     // Hooks for extracting url parameters and queries
    // Example path: /details/1?redeemable=true
      const { id } = useParams<{ id: string }>(); // result: 1
      const { redeemable } = queryString.parse(location.search); // result: true
      
    // React-query is used for fetching data, implementation will be omited
      const { data, status } = useQuery<any>('collectible', () =>
        fetchCollectible(client, id),
      );
    }
    

    I am using msw-storybook-addon for intercepting each component's api request in my stories like so (this is another story which is not related to this problem):

    
    export default {
      title: 'Screens/Profile',
      component: Profile,
      decorators: [
        (Story) => (
          <ContentContainer>
            <Story />
          </ContentContainer>
        ),
      ],
      parameters: {
        msw: [
          rest.get(
            `${process.env.REACT_APP_API_URL}/profile`,
            (_, res: any, ctx: any) => {
              return res(
                ctx.json({
                  username: 'Foo',
                  description: "bar",
                  name: 'Jhon Doe'
                }),
              );
            },
          ),
        ],
      },
    } as Meta;
    
    export const ProfileStory: Story<any> = (args) => <Profile {...args} />;
    

    Now only need to configure the first story to provide a URL for the component, since there isn't one, and error is thrown. Here since there isn't an id in the path, my component tries to execute a fetch request with an id of undefined

    index.js:1581 GET http://localhost:3000/defatils/undefined/business 
    

    I already checked the Params example, but honestly it makes to sense to me, since no param is being passed into the child component?

    My Storybook Router Config

    I am using the CSF and followed this issue for configuring this package (pls update the documentation with an example configuration for CSF).

    Here's preview.js I didn't add any routes here.

    addDecorator(storyRouterDecorator());
    

    Here's the story causing me trouble

    
    export default {
      title: 'Screens/CollectibleDetails',
      component: Details,
      decorators: [
        storyRouterDecorator({ // I tried to provide a link to this story hopping it would be used by the component
          '/details/1/business': linkTo(
            'Screens/CollectibleDetails',
            'RedeemableCollectible',
          ),
        }),
        (Story) => (
          <AppAlertProvider>
            <ContentContainer>
              <Story />
            </ContentContainer>
          </AppAlertProvider>
        ),
      ],
      parameters: {
        msw: [
          rest.get(
            `${process.env.REACT_APP_API_URL}/details/1/business`, // intercept this request
            (_, res: any, ctx: any) => { // Send this response
              return res(
                ctx.json({
                // some data
                 }),
          ),
        ],
      },
    } as Meta;
    
    const Template: Story<any> = (args: any) => <Details {...args} />;
    
    export const RedeemableCollectible = Template.bind({});
    

    Note: I'm using typescript in my project

    Reviewed by Je12emy at 2021-07-21 20:17
  • 13. Bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-28 14:27
  • 14. vue-router v4 support

    Issue:

    The decorator currently supports react-router v4 / v5 and vue-router v2 / v3.

    It seems currently not supporting vue-router v4

    Which version are you using?

      "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0"
      },
    
      "devDependencies": {
       ...
        "@storybook/vue3": "^6.3.0-alpha.43",
        "storybook-vue-router": "^1.0.7",
      },
    

    Are you using storybook-router with a react based project or a vue one?

    Yes

    Please describe the problem:

    storybook_vue_router__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function

    Screen Shot 2021-05-25 at 14 56 35

    Please explain how to reproduce the issue or (better) provide an example to do it.

    1.Init storybook for vue 3 with CLI

    npx [email protected] init
    

    2.Write a story for a router component

    import MyComponent from './MyComponent.vue';
    import StoryRouter from 'storybook-vue-router';
    
    export default {
      title: 'Example/Folder',
      component: MyComponent,
    };
    
    export const MyComponent = () => ({
      components: { MyComponent },
      decorators:  [ StoryRouter() ],
      template: '<MyComponent />',
    });
    

    3.yarn storybook

    Reviewed by ibarapascal at 2021-05-25 05:59
  • 15. Bump hosted-git-info from 2.7.1 to 2.8.9

    Bumps hosted-git-info from 2.7.1 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-11 14:38
  • 16. Bump url-parse from 1.4.7 to 1.5.1

    Bumps url-parse from 1.4.7 to 1.5.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-09 15:00
  • 17. Bump handlebars from 4.1.2 to 4.7.7

    Bumps handlebars from 4.1.2 to 4.7.7.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.7 - February 15th, 2021

    • fix weird error in integration tests - eb860c0
    • fix: check prototype property access in strict-mode (#1736) - b6d3de7
    • fix: escape property names in compat mode (#1736) - f058970
    • refactor: In spec tests, use expectTemplate over equals and shouldThrow (#1683) - 77825f8
    • chore: start testing on Node.js 12 and 13 - 3789a30

    (POSSIBLY) BREAKING CHANGES:

    • the changes from version 4.6.0 now also apply in when using the compile-option "strict: true". Access to prototype properties is forbidden completely by default, specific properties or methods can be allowed via runtime-options. See #1633 for details. If you are using Handlebars as documented, you should not be accessing prototype properties from your template anyway, so the changes should not be a problem for you. Only the use of undocumented features can break your build.

    That is why we only bump the patch version despite mentioning breaking changes.

    Commits

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-08 20:41
Vue language routing with (optional) localized URLs.
Vue language routing with (optional) localized URLs.

?? Vue Language Router Language routing and URL localization made easy. Built on top of ?? Vue Router and ?? Vue I18n. Demo You can play with demo at

Aug 5, 2022
File system based routing plugin for Vite

voie ?? File system based routing for Vue 3 applications using Vite Voie is a Vite plugin that brings file system based routing to your Vue 3 applicat

Aug 3, 2022
Event-based routing system for Vue.js.
Event-based routing system for Vue.js.

Vue Lanes Event-based routing system for Vue.js. Example Vue Lanes need to be initialized first. The Lanes extended Vue will let you create Vue Lanes

Feb 18, 2022
Generate Vue Router routing automatically for multipages

Generate Vue Router routing automatically for multipages

Jul 20, 2022
Provides a wrapper for router-view that allows you to show error pages without changing the URL.

vue-error-page Provides a wrapper for router-view that allows you to show error pages without changing the URL. Why? Because: Trigger router-view chan

Apr 6, 2022
Tidy routes definitions across your entire project

vue-tidyroutes plugin VueJS routes definitions that can be created anywhere in your project. Under the hood It's just a singleton object that store al

Aug 3, 2021
A dapp that allows reader to buy stories in NFT

Stories NFT A dapp that allows reader to buy stories in NFT Live Site - https://storiesnft.netlify.app/ Demo - https://youtu.be/LNgazG0Npjc Won Second

Apr 5, 2022
This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.
This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.

This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.

May 22, 2021
Breadcrumbs plugin for Vue.js 2 framework that allows to select parent route in route meta object with no need of sub-routing
Breadcrumbs plugin for Vue.js 2 framework that allows to select parent route in route meta object with no need of sub-routing

vue-2-crumbs Breadcrumbs plugin for Vue.js 2 framework allows to select parent route in route meta object with no need of sub-routing. Features: Setti

Jun 14, 2022
Breadcrumbs plugin for Vue.js 2 framework that allows to select parent route in route meta object with no need of sub-routing
Breadcrumbs plugin for Vue.js 2 framework that allows to select parent route in route meta object with no need of sub-routing

Breadcrumbs plugin for Vue.js 2 framework that allows to select parent route in route meta object with no need of sub-routing.

Apr 20, 2018
This application allows you to convert cards with NFC tags that you do not use into a digital business card

NFC qq ?? ?? Live Website: NFC qq ?? About the app This application allows you to convert cards with NFC tags that you do not use into a digital busin

Aug 3, 2022
Aug 8, 2022
A math-aware search engine.
A math-aware search engine.

Approach0 is a math-aware search engine. Online demo Visit https://approach0.xyz/search Documentation Visit https://approach0.xyz/docs for technical d

Jul 17, 2022
👋 Declarative, direction-aware hover in Vuejs
👋 Declarative, direction-aware hover in Vuejs

vue-direction Direction aware hover in Vuejs Installation Install the component via npm by running npm i vue-direction or yarn add vue-direction. Usag

Dec 4, 2021
Slide stories is a project built using Vue.js 3 & Tailwind.css.
Slide stories is a project built using Vue.js 3 & Tailwind.css.

slide-stories Slide stories is a project built using Vue.js 3 & Tailwind.css. Usage Just download or clone the repo. cd slide-stories run npm install

Aug 16, 2022
Instagram stories clone built with vue.js
Instagram stories clone built with vue.js

vue-stories-instagram Simple usage <template> <Stories :stories="items" /> </template> <script> import Stories from "vue-stories-instagram"; expor

Jun 29, 2022
Vue.js and Property Decorator

Vue Property Decorator This library fully depends on vue-class-component, so please read its README before using this library. License MIT License Ins

Aug 10, 2022
Typescript decorator for Vue mixins

Vue Mixin Decorator This library fully depends on vue-class-component. Most ideas and code are stolen borrowed from @HerringtonDarkholme and his av-ts

Aug 5, 2022