An app that has been using webpack for the dev server should now use vite. Everything seems to be working fine (and fast) with the exception of routes. These are simply ignored and only the content of App.vue is rendered.
This is package.json:
{
"name": "mode",
"version": "0.0.0",
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.5",
"vue-router": "^4.0.4"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.1.4",
"#vue/compiler-sfc": "^3.0.5",
"vite": "^2.0.2",
"typescript": "~3.9.3"
}
}
The central index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
In src/main.ts the router is loaded:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
That router is defined in src/router/index.ts:
import { createRouter, createWebHistory } from 'vue-router'
import SomePage from '#/views/SomePage.vue'
const router = createRouter({
history: createWebHistory(),
routes: [{
path: '/some',
name: 'Some',
component: SomePage
}]
})
export default router
The (never shown) src/views/SomePage.vue is:
<template>
<div class="section">
Some content on some page.
</div>
</template>
And this is the (always shown) App.vue:
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
With this src/components/HelloWorld.vue:
<template>
<h1>{{ msg }}</h1>
<p>
Fancy text.
</p>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
msg: String
})
</script>
I would expect http://localhost:3000/some to show the content of SomePage.vue, but only the content of App.vue is rendered, regardless of the route used.
Pointers to what I'm missing here and why the fine route is ignored are appreciated.
You need to add a router-view to go to the page routed.
If you want SomePage to be part of App.vue just do so by
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<router-view />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
Related
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 want to apply some margin on PrimeVue elements inside my Vue3 app. Based on the example from the docs
https://www.primefaces.org/primevue/showcase/#/selectbutton
I have a working example with a margin between the icon and the text
<!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.0" />
<!-- PrimeVue -->
<link href="https://unpkg.com/primevue#^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue#^3/resources/primevue.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeflex#2.0.0/primeflex.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies -->
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/primevue#^3/core/core.js"></script>
<!-- Demo -->
<script src="https://unpkg.com/primevue#^3/selectbutton/selectbutton.min.js"></script>
<link href="./index.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<p-selectbutton v-model="selectedValue" :options="options" dataKey="value">
<template #option="slotProps">
<i class="pi pi-check-circle" />
<span class="p-ml-4">Some text</span>
</template>
</p-selectbutton>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const selectedValue = ref();
const options = ref([
{ value: 'left' },
{ value: 'right' }
]);
return { selectedValue, options }
},
components: {
"p-selectbutton": primevue.selectbutton
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
</script>
</body>
</html>
But the margin does not work in my project. For reproduction:
vue create foo
# select default Vue3 app
cd foo
# based on https://primefaces.org/primevue/showcase/#/setup
npm install primevue
npm install primeicons
npm install primeflex
I change the main.js file to
import { createApp } from 'vue'
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.css";
import SelectButton from "primevue/selectbutton";
import App from './App.vue'
createApp(App)
.use(PrimeVue)
.component("p-select-button", SelectButton)
.mount('#app')
I change the App.vue file to
<template>
<p-select-button v-model="selectedValue" :options="options" dataKey="value">
<template #option>
<i class="pi pi-check-circle" />
<span class="p-ml-4">Some text</span>
</template>
</p-select-button>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const selectedValue = ref();
const options = ref([
{ value: 'left' },
{ value: 'right' }
]);
return { selectedValue, options }
},
}
</script>
When running the app the result is
Does someone know why the margin works in the first sample but not in my code? What am I missing?
Your CDN demo uses PrimeFlex 2:
<link href="https://unpkg.com/primeflex#2.0.0/primeflex.min.css" rel="stylesheet" />
👆
But your app uses PrimeFlex 3 (i.e., npm install primeflex installs 3.1.0). The latest version has removed the p- prefix from all classnames for readability, so the class name is now ml-4.
Solution 1: Update classname to ml-4
You can use PrimeFlex 3's classname in App.vue:
<!-- BEFORE -->
<span class="p-ml-4">Some text</span>
<!-- AFTER -->
<span class="ml-4">Some text</span>
demo 1
Solution 2: Downgrade to PrimeFlex 2
If you prefer to use the existing version (perhaps to minimize changes in a large app), install PrimeFlex 2 instead:
npm install -S primeflex#2
demo 2
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>
I cant seem to get this simple vue router work, its giving this in console GET http://127.0.0.1:8000/my-new-router 404 (Not Found), i am using it with laravel
app.js:
require('./bootstrap');
window.Vue = require('vue');
import router from './router'
Vue.component('navbar', require('./components/navbar.vue').default);
const app = new Vue({
el: '#app',
router
});
router.js:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import firstPage from './components/pages/MyFirstPage'
const routes= [
{
path: '/my-new-router',
component: firstPage
}
]
export default new Router({
model:'history',
routes
})
navbar.vue:
<template>
<div>
<h1>This is a test</h1>
<router-view></router-view>
</div>
</template>
MyFirstPage.vue:
<template>
<div>
</div>
</template>
welcome.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<div id="app">
<navbar></navbar>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Change the content of web.php to:
<?php
use Illuminate\Support\Facades\Route;
Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');
This way any route will be forwarded to vue-router.
I am trying to set up Router-Configuration for Aurelia.
The project was created with au new and au run --watch was used to run Aurelia, which worked fine.
My Basic Structure looks like the following:
Index.html
src
--- home
------- home.html
--- app.ts
--- app.html
--- main.ts
My code for all the classes is:
// main.ts:
import {Aurelia} from 'aurelia-framework'
import environment from './environment';
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.feature('resources');
if (environment.debug) {
aurelia.use.developmentLogging();
}
if (environment.testing) {
aurelia.use.plugin('aurelia-testing');
}
aurelia.start().then(() => aurelia.setRoot());
}
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
<script src="scripts/app-bundle.js" ></script>
<script src="./jquery/jquery-3.2.1.min.js"></script>
<script src="./bootstrap/js/bootstrap.js"></script>
</body>
</html>
The 2 following classes do make problems:
// app.ts
import { Aurelia, PLATFORM } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router';
export class App {
router: Router;
configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'MyTitle';
config.map([{
route: [ '', 'home' ],
name: 'home',
moduleId: PLATFORM.moduleName('./home/home'),
nav: true,
title: 'Home'
}
]);
this.router = router;
}
}
// app.html
<template>
<require from="navmenu/navmenu.html"></require>
<require from="./bootstrap/css/bootstrap-grid.min.css"></require>
<div class="container">
<div class="row">
<div class="col-sm-12">
<navmenu router.bind="router"></navmenu>
<div class="col-sm-12" style="background-color:#9f0206; height:10px;">
</div>
</div>
</div>
<div class="row">
<div class="body-content container">
<div class="col-lg-12 page-host">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
As I understand the <router-view></router-view> tag is neccessary for the router. When I remove this tag, the Layout is rendered, except for the Data specified in app.ts.
With this line the browser results in the following error: Cannot read property '__useDefault' of undefined
What am I doing wrong? Is the router not injected or not available?