Vuetify with ASP .NET WebApplication

vue-router

#1

I use vuetify in ASP .NET WebApplication and I need to use the routes


#2

Can you clarify your problem a bit more? Do you want to use Vue Router or do you need to use the routes from .NET?


#3

I need to use de routes from .NET with vuetify.
For example, I have this list and I need show the page Moneda,
Thanks!!!


#4
@ViewBag.Title - My ASP.NET Application
<div id="app">
    <v-app id="inspire">
        <v-toolbar color="blue darken-3" dark app :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
            <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
                <span class="hidden-sm-and-down">Sistema</span>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon>
                <v-icon>apps</v-icon>
            </v-btn>
        </v-toolbar>
        <v-navigation-drawer fixed :clipped="$vuetify.breakpoint.mdAndUp" app v-model="drawer">
            <v-list dense>
                <template>
                    <v-list-tile >
                        <v-list-tile-action>
                            <v-icon>home</v-icon>
                        </v-list-tile-action>
                        <v-list-tile-title>
                            Nomencladores
                        </v-list-tile-title>
                    </v-list-tile>
                </template>
                <template>
                    <v-list-group>
                        <v-list-tile slot="activator">
                            <v-list-tile-content>
                                <v-list-tile-title>
                                    Generales
                                </v-list-tile-title>
                            </v-list-tile-content>
                        </v-list-tile>
                        <v-list-tile>
                            <v-list-tile-content>
                                <v-list-tile-title>
                                    Moneda
                                </v-list-tile-title>
                            </v-list-tile-content>
                        </v-list-tile>
                    </v-list-group>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-content>
            <v-container>
                <v-slide-y-transition mode="out-in">
                    <router-view></router-view>
                </v-slide-y-transition>
            </v-container>
        </v-content>

        <v-footer dark height="auto">
            <v-layout justify-center>
                <v-flex text-xs-center>
                    <v-card flat tile color="primary" class="white--text">
                        <v-card-text class="white--text pt-0">
                            ZUNpms &copy;2019
                        </v-card-text>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-footer>

    </v-app>
</div>



@RenderBody()

<script src="~/node_modules/vue/dist/vue.js" type="text/javascript"></script>
<script src="~/node_modules/vuetify/dist/vuetify.min.js" type="text/javascript"></script>
<script>

    new Vue({
        el: '#app',
        data() {
            return {
                drawer: null
            }
        }
    })

</script>

#5

I would combine all the scripts and use webpack or a different build-tool to create a single entry point for your JavaScripts. The <div id="app"> should wrap your whole application if you want to use Vue and it’s components.

What’s the problem that you’re currently experiencing? Perhaps if I have a bit more information, I could help you out better.