Hi, i use quasar UMD framework v1.0 in a AspNet Core application. I have a shared page where i use a layout page:
<div id="main-quasar">
<template>
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg">
</q-avatar>
Title
<q-btn type="a" href="@UrlHelperExtensions.Action(Url,"index","home")" label="Home"></q-btn>
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-page-container>
@RenderBody()
</q-page-container>
<q-footer elevated class="bg-grey-8 text-white">
<q-toolbar>
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg">
</q-avatar>
Title
</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
</template>
</div>
<script>
new Vue({
el: '#main-quasar',
data: function () {
return {
}
},
methods: {
}
},
})
</script>
The body page is in a different file with a quasar component and related script part:
<div id="q-login-form">
<div class="q-pa-md" style="max-width: 400px">
<form id="account" method="post">
<q-input filled
label="Your email"
v-model="email"
typeof="email"
hint="email"
name="Input.Email"></q-input>
<q-input filled
v-model="password"
type="password"
name="Input.Password"
label="password"
lazy-rules>
</q-input>
<div>
<q-btn label="Submit" type="submit" color="primary"></q-btn>
<q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm"></q-btn>
</div>
</form>
</div>
</div>
<script>
new Vue({
el: '#q-login-form',
data() {
return {
email: '',
password:''
}
},
methods: {
onReset() {
this.name = null
this.age = null
this.accept = false
}
}
})
</script>
But the Vue nested does not work. How can insert nested component in a shared page with different file?