Bootstrap tabs "#/" not appearing and can't navigate directly to tab

You need to remove the / from the url here!

This

myapp.com/blog#/posts

Should be this

myapp.com/blog#posts

Hey, thanks for your reply!

But i think this is not the problem. Url in spark components is like this:

sparkapp.test/spark/kiosk#/announcements

Also i tried to navigate to the following url:

sparkapp.test/blog#/posts
sparkapp.test/blog#posts
sparkapp.test/blog/#posts

And none of them is opening the posts tabs. It just opens the default active tab.

Mmh, this must be something in the routing part of spark then... I currently have no app running with spark, so I can't really help you with that.

I guess it's using the vue-router plugin and there is an option to turn that on or off! But that's just guessing!

You need to create it with vue and create a new vue component. They have an example component in /resources/assets/js/components/Example.vue. Here's a pretty quick guide for adding a new tab: https://laracasts.com/discuss/channels/spark/adding-a-settings-tab

Thanks for your replies.

Maybe i'm missing something, but i don't think this is the problem i'm facing. Also, i don't want to add more tabs to the settings sidebar, i'm working on another one I made in another section.

The problem i face is when i change tabs, the url is not being upated so i can't {{ url('/admin/blog#/tags') }}.

I don't think example components have the solution to this problem.

Maybe the [mixins] that is being passed to some components have some sort of routing function?

I had issues with this before, ended up making my own.

Have you had a look in the console, does it give any errors when loading? Can you share your Vue component .js file?

Sorry for the late reply.

I have no errors in js console and my component js is empty.

Component js:

Vue.component('blog-component', {
    props: ['user'],

    mounted() {
        //
    }
});

Component template:

<blog-component :user="user" inline-template>
    <div>
        <div class="container">
            <div class="row">
                <!-- Tabs -->
                <div class="col-md-3 spark-settings-tabs">
                    <aside>
                        <h3 class="nav-heading ">
                            {{__('Blog')}}
                        </h3>
                        <ul class="nav flex-column mb-4 ">
                            <li class="nav-item ">
                                <a class="nav-link active" href="#posts" aria-controls="posts" role="tab" data-toggle="tab">
                                    <svg class="icon-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                        <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/>
                                    </svg>
                                    {{__('Posts')}}
                                </a>
                            </li>

                            <li class="nav-item ">
                                <a class="nav-link" href="#categories" aria-controls="categories" role="tab" data-toggle="tab">
                                    <svg class="icon-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                        <path d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"/>
                                    </svg>
                                    {{__('Categories')}}
                                </a>
                            </li>

                            <li class="nav-item ">
                                <a class="nav-link" href="#tags" aria-controls="tags" role="tab" data-toggle="tab">
                                    <svg class="icon-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
                                        <path d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"/>
                                    </svg>
                                    {{__('Tags')}}
                                </a>
                            </li>
                        </ul>
                    </aside>
                </div>

                <!-- Tab cards -->
                <div class="col-md-9">
                    <div class="tab-content">
                        <!-- Posts -->
                        <div role="tabcard" class="tab-pane active" id="posts">
                            @include('back.admin.blog.posts')
                        </div>

                        <!-- Categories -->
                        <div role="tabcard" class="tab-pane" id="categories">
                            @include('back.admin.blog.categories')
                        </div>

                        <!-- Tags -->
                        <div role="tabcard" class="tab-pane" id="tags">
                            @include('back.admin.blog.tags')
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Destroy Modal -->
        <div class="modal fade" id="destroyModal" tabindex="-1" role="dialog" aria-labelledby="destroyLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <form id="destroy-form" action="" method="GET">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="destroyLabel">Deleting <span id="destroyed-model">Item</span></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>This action is permanent. Are you sure to continue?</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-danger">Delete</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</blog-component>