Manage API paths in the front-end

Downloads in past


001.1.32 months ago3 months agoMinified + gzip package size for simple-axios-router in KB


Manage API paths in the front-end
npm i simple-axios-router
First of all, you need to set your API paths in your main.js file


To register routes, you must import the Router class
import { Router } form 'simple-axios-router'

Optionally, you can set the base URL
Router.setBaseUrl('https://example/api') // optional

Register your routes
Router.get('posts', '/posts')

You may submit an ajax request based on the route name
import { axios } form 'simple-axios-router'

    .then((res) => console.log(res))
    .catch((err) => console.log(err))


All methods in the Router class
Router.get('name', 'path') // get request'name', 'path') // post request
Router.put('name', 'path') // put request
Router.patch('name', 'path') // patch request
Router.delete('name', 'path') // delete request

You may use the middleware method to set middleware for the route
import Auth form './middleware/Auth'

Router.get('profile', '/profile').middleware([Auth, ...])

You may set any parameter in the URL by using :key
Router.get('posts', '/posts/:slug/:id')

now you must call axios like this
axios({name: 'posts', params: { slug: 'example-title', id: 1 } })

// URL => '/posts/example-title/1'

NOTE: Do not add / at the end of any path, just add it at the beginning
Do this: /posts/:id
Don't do this: posts/:id/

also, you may use the group method to create a route group{name: 'posts', prefix: '/posts', middleware: [Auth, ...]}, () => {
    Router.get('', '/').middleware([Example, ...]) // name: 'posts', url: '/posts/'
    Router.get('.show', '/:id') // name: '', url: '/posts/:id''.create', '/') // name: 'posts.create', url: '/posts/'
    Router.put('.update', '/:id') // name: 'posts.update', url: '/posts/:id'
    Router.delete('.delete', '/:id') // name: 'posts.delete', url: '/posts/:id'

or you may use the resource method to create resource routes
Router.resource('posts', '/prefix', [Middleware, ...])

the resource method creates 5 routes
  1. name: posts , url: /prefix/posts/ , method: get
  2. name: , url: /prefix/posts/:id , method: get
  3. name: posts.create , url: /prefix/posts/ , method: post
  4. name: posts.update , url: /prefix/posts/:id , method: put
  5. name: posts.delete , url: /prefix/posts/:id , method: delete

NOTE: Do not set prefixes such as /, posts/

Other methods:

Router.route(name): get a route data
Router.deleteRoute(): delete all routes


After registering all routes, you can use the axios helper function to send an ajax request
import { axios } form 'simple-axios-router'

axios('route name', { data: [] })
    .then((res) => console.log(res))
    .catch((err) => console.log(err))

When your route doesn't require any parameters or data

When your route requires some parameters and data
    { name: 'posts.update', params: { id: 1 } },
    { data: [] }

Sometimes you may need to set query params or other axios configs
        data: [],
        params: {search: 'key'} // query params
        onUploadProgress: () => {},
        onDownloadProgress: () => {},
        // add other axios configs


For middleware, I use axios-middleware as a dependency

But there are 2 changes:
-onBeforeRequest method to approve the request
-Access Route data in the constructor method
export default class Auth {
    constructor(route) {
        this.route = route

    // Must return true / false
    onBeforeRequest() {
        let { name, middleware, url, method } = this.route

        return true

    // check out this link for more methods

import Auth form './Auth'

Router.get('profile', '/profile').middleware([Auth, ...])