Due to security reasons we cannot install nodejs and any package managers. THerefore, I am trying to build my SPA with cdn support only. However, I am struggling to get it to work as I keep getting the failed to mount template error when running my code. I am using ASP.NET core 3.1 and i am able to get to the page to load up my partial views showing the side navigation and top navigation items. The page loads up and the router seems to work in changing the url in browser but the view components for the actual page templates do not show up on the screen. For instance dashboard view should show up but does not and therefore i believe this is where the issue is but I cannot see any issues with my code.
My code is as follows:
_vueapp:
<!DOCTYPE html>
<html lang="en">
<head>
#RenderSection("Styles", required: false)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewData["Title"] - ARMS 2.0</title>
<link rel="stylesheet" href="~/css/sidebar.css" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
#RenderBody()
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
index file
#page
#model ARMS_2._0_LOCAL.Pages.vue.IndexModel
#{
Layout = "_Vueapp";
}
<div id="app" v-cloak>
<side-navigation></side-navigation>
<top-navigation></top-navigation>
<router-view></router-view>
</div>
#section Scripts
{
<partial name="components/side-navigation" />
<partial name="components/top-navigation" />
<partial name="views/dashboard" />
<partial name="views/reviews" />
<script>
//setup routing using SPA VUE interface
Vue.use(VueRouter);
const routes = [
{ path: '/', component: dashboard },
{ path: '/reviews', component: reviews }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
var app = new Vue({
el: '#app',
router
}).$mount('#app')
</script>
}
side-navigation:
<style>
</style>
<template id="side-navigation">
<div>
<router-link to="/">Home</router-link>
<router-link to="/reviews">Reviews</router-link>
</div>
</template>
<script>
Vue.component('side-navigation', {
template: '#side-navigation'
})
</script>
one of my views which is dashboard:
<style>
</style>
<template id="dashboard">
<div>
<h1>dashboard</h1>
</div>
</template>
<script>
Vue.component('dashboard', {
template: '#dashboard'
})
</script>
You need to assign the components (dashboard and reviews) to a constant, otherwise the router can not recognize them.
dashboard:
<style>
</style>
<template id="dashboard">
<div>
<h1>dashboard</h1>
</div>
</template>
<script>
const dashboard = Vue.component('dashboard', {
template: '#dashboard'
})
</script>
reviews:
<style>
</style>
<template id="reviews">
<div>
<h1>reviews</h1>
</div>
</template>
<script>
const reviews = Vue.component('reviews', {
template: '#reviews'
})
</script>
Related
I created a vuejs3 single page application "WITHOUT" router and routing and also without "url" change ( want to always showing home in address bar)
But need help to do it in a correct way.
I want to
have a main html page on page have links, buttons or so, that at run
time page is filed (how???)
on start page be filled with the first home page
on click of each link or buttons the selected component to be replace in the page
index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import './style.css'
const app = createApp(App)
app.use(store)
app.mount('#app')
app.vue file
<template>
<div>
<h1>Hello world</h1>
<button type="button" #click="changeView(0)"> Home 1 </button>
<button type="button" #click="changeView(1)"> Home 2 </button>
<button type="button" #click="changeView(2)"> Home 3 </button>
</div>
<Suspense v-if="isLoggedIn">
<template #default>
<changeViews />
</template>
<template #fallback>
<p>loading...</p>
</template>
</Suspense>
<changeViews v-if="showIt" />
</template>
<script setup>
import { defineAsyncComponent, ref, markRaw } from 'vue'
const menus = [
{
name: "home"
,url: "home"
},
{
name: "about"
,url: "about"
},
{
name: "contact"
,url: "contact"
},
]
let showIt = ref(false)
let changeViews = ref(null)
changeViews.value = markRaw(defineAsyncComponent((loc) =>
import(`./components/${menus[0].url}/index.vue`)
))
function changeView(ja){
showIt.value = false
if(ja===1) {
showIt.value = true
changeViews.value = defineAsyncComponent((loc) =>
import(`./components/${menus[ja].url}/index.vue`)
)
}
}
</script>
Pages (home, about, contact) are very simple:
<template>
<h2> Home </h2>
<div class="card">
<button type="button" #click="count++">count is {{ count }}</button>
<button type="button" #click="count++">count is {{ count }}</button>
<button type="button" #click="count++">count is {{ count }}</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
</script>
It is working, but it seems messy and I have no idea how to do it in a good way.
I have searched but every where they talk about how to use routing, while I want to avoid routing and no url-change
I think you need to use dynamic components. You can dynamically specify which component to render at a single place.
<template>
<component :is="currentPage" />
</template>
<script setup>
import PageA from '#/components/PageA.vue'
import PageB from '#/components/PageB.vue'
import PageC from '#/components/PageC.vue'
const currentPage = ref('PageA')
function changeView(page) {
currentPage.value = page
}
</script>
I have application on aspnet mvc and import vuejs v3 cdn and i like use vuetify but i dont know how do it.
its my code example
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewData["Title"] - MVCAndVue</title>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
<script>
const {
ref,
reactive,
} = Vue;
//Define Vue app
const App = {
data() {
return {
};
},
methods: {
},
setup(props, context) {
}
};
// Create new Vue app
const app = Vue.createApp(App);
app.mount("#app");
</script>
You are facing this issue because you included Vuetify 2.x which is not compatible with Vue 3. So, use Vuetify 3 instead.
Now, the right way to use Vuetify via CDNs, you need to follow these steps-
Import Vuetify CSS in your head tag-
<link
href="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
If you want to use material design icons, then import this CSS link in your head tag too-
<link
href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
Import the Vuetify script in your body tag-
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.js"></script>
If you are planning to use Vue3 also via CDN, then import the Vue script in your body tag-
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
Here is a complete working HTML file with all necessary imported CDNs for Vue3 and Vuetify3-
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.js"></script>
<script type="text/x-template" id="app-template">
<v-app>
<v-card
class="mx-auto"
width="400"
append-icon="mdi-human-greeting"
>
<template v-slot:title>
Title
</template>
<v-card-text>
Description
</v-card-text>
</v-card>
</v-app>
</script>
<script>
const { createApp } = Vue;
const { createVuetify } = Vuetify;
const vuetify = createVuetify();
const app = createApp({
template: "#app-template",
})
.use(vuetify)
.mount("#app");
</script>
</body>
</html>
To read more about using CDNs, read here-
https://next.vuetifyjs.com/en/getting-started/installation/#cdn
https://next.vuetifyjs.com/en/features/icon-fonts/#material-design-icons
I made a simple html file with vue-router.
I use x-template to define component template.
It works well on chrome browser, but I found that IntelliJ IDE show me a red line.
I cannot understand why IDE can't resolve this and why my code works well on the browser even though the symbol can't be resolved.
Does anyone have an idea? (The code is written below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router_App</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<nav>
<router-link to="/top">Top page</router-link>
<router-link to="/users">User page</router-link>
</nav>
<router-view></router-view>
</div>
<script type="text/x-template" id="user-list">
<div>User page</div>
</script>
<script>
let router = new VueRouter({
routes: [
{
path: '/top',
component: {
template: '<div>Top page</div>'
}
},
{
path: '/users',
component: {
template: '#user-list'
}
}
]
})
let app = new Vue({
el: '#app',
router: router
}).$mount()
</script>
</body>
</html>
I am using vuerouter really for the first time and I am trying to dynamically add a url name to the hyperlink of the route. Not sure what I am doing here, {{message}} would show the name and I am trying to concatenate that to the existing url--what am I doing wrong?
secondly, because these pages are dynamically generated, would I use vuex to store the state--? so that others could see the pages--?
const Home = { template: '<div>Home</div>' }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/', component: Foo, props: route => ({
})}
]
})
new Vue({
router,
el: '#app',
data: {
message:''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="container">
<div id="app">
<h2>Generator</h2>
<input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{{message}}.html</strong><br>
<strong> Card_{{message}}.html</strong><br>
<strong> state_{{message}}.html</strong><br>
<strong> Log_{{message}}.html</strong><br>
<strong> Log2_{{message}}.html</strong><br><br>
<router-link to="/">/home</router-link>
<router-link to="url/+'{{message}}+'">eCard</router-link>
<router-link to="/foo/5/5">Directory</router-link>
<router-view></router-view>
<p><button class="btn btn-primary">Generate</button></p>
</div>
In order to generate the url, what you want is to use a v-bind on the route, you can do this by replacing the "to" with ":to"
Once you have that, the content of the attribute ":to" behaves as if it was javascript and you have access to all the properties of the vue component so you can just do:
<router-link to="'url/' + message">eCard</router-link>
However this route hasnt actually been registerd so it will not load anything.
Instead you may want to register a route that accepts a parameter
{ path: '/url/:id', name: 'ecard', component: eCardComponent , props: true }
In this way you can call your route as
<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
Then you can do whatever you need in that component, like loading info from a database for that particular id.
Additionally, Vuex only works on the current tab (unless you use some code to syncronize it with the localstorage, like this example) and even then it would not persit it across machines.
const Home = { template: '<div>Home</div>' }
const eCardComponent = { template: '<div>Ecard :{{id}}</div>', props:['id'] }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/', component: Foo, props: route => ({
})},
{ path: '/url/:id', name:'ecard', component: eCardComponent, props: true },
]
})
new Vue({
router,
el: '#app',
data: {
message:''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="container">
<div id="app">
<h2>Generator</h2>
<input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{{message}}.html</strong><br>
<strong> Card_{{message}}.html</strong><br>
<strong> state_{{message}}.html</strong><br>
<strong> Log_{{message}}.html</strong><br>
<strong> Log2_{{message}}.html</strong><br><br>
<router-link to="/">/home</router-link>
<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
<router-link to="/foo/5/5">Directory</router-link>
<router-view></router-view>
<p><button class="btn btn-primary">Generate</button></p>
</div>
this is my code for my module that will be compiled by gulp laravel elixir
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios,VueRouter);
axios.defaults.headers.common['X-CSRF-TOKEN'] = Laravel.csrfToken;
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes,
});
const app = new Vue({
router,
// render: h => h(app)
}).$mount('#app')
and this my app.blade.php the main template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- <router-link> will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
Im really having a hard time because when i compile it i receive an error that router-link is not registered but when i put my script tags on the upper part
app is not found
how can i make this thing work?
IIUC: an html renders at server-side, with a script injected to it, the script contains your compiled vue component, and will mount it to a node in the dom. Which means, the php file containing router-link will only be passed through php parser, who have no idea what router-link is. Only front end compilers know how to handle router-link, so you need to put it in your vue component's template (to make it go through front end compiler who understands it). Also, when you're mounting to #app, contents inside it will be overwritten by vue, so avoid putting useful things inside, but reorganize your html or put them in your vue component instead.