Currently my web application is loaded like this in index.html -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tempo</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
</body>
</html>
and the ID of 'app' is my main vue instance (see below)-
var spa = new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
})
I am trying to have a second html page (live.html) that will hold the vue instance of -
var outer = new Vue({
el: '#outer',
router,
store,
template: '<Live/>',
components: { Live },
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tempo</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer"></div>
</body>
</html>
Both these vue instances are located in my main.js - But only the 'App' instance is being loaded, I i change my url to 'localhost:8080/live.html' nothing appears.
If I move the id="outer" to my index.html it will load, but my aim is to have it load on a separate html file so that its components can be displayed separately, but may be able able to communicate using vuex for the rest of the SPA.
Any pointers in the right direction is greatly appreciated and if any clarification is needed, please ask.
Here's what I had in mind:
const router = new VueRouter({
routes: [
{
path: '/livedisplay',
component: Live
},
{
path: '/',
component: Main,
children: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
]
},
]
})
Your menu and navigation would be within the "Main" component
Related
I work with a team that use Pinia for state management across a Vue ( & vuetify ) application, everything works fine on their machines and on my laptop. However, when I am using my desktop pinia doesn't seem to work and I am certain that I've set up the application the same way on both devices,I've even re-setup the env on my desktop multiple times.
When I load an application on my laptop I see 🍍 "currentUser" store installed 🆕 and I am able to access it as expected with no issues, the Pinia tab appears in my Vue devtools too.
When I load the application on my desktop I do not see a 'store installed' prompt and everything is passed as a ref __v_isRef: true but the Pinia tab still appears in my Vue devtools...
If I console.log() a value in the store I get the response I'd expect but, when I console.log() a variable in the store on my desktop I get the following:
{
value: false,
__V_isRef: true,
get value: function value(){},
set value: function value(){},
}
Now for another spanner, the code below works perfectly fine if I run it in something like codepen leading me to think its something with node / vue / vuetify, how could I check if it is?
const useCounterStore = Pinia.defineStore('counter', {
state() {
return {
value: 0
}
},
actions: {
increment(state) {
this.value++
},
}
})
Vue.use(Pinia.PiniaVuePlugin)
new Vue({
el: '#app',
vuetify: new Vuetify(),
pinia: Pinia.createPinia(),
computed: {
...Pinia.mapState(useCounterStore, ['value'])
},
methods: {
...Pinia.mapActions(useCounterStore, ['increment', 'incrementBugged'])
},
})
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>Count is: {{ value }}</v-container>
<button #click="increment">Click here, works on both my desktop and laptop</button>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/#vue/composition-api"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/pinia"></script>
</body>
</html>
Please LMK if you need any additional information :)
I'am trying to make a simply router with vue-router on vuejs3 and i get this warning on the first click on a link (not the others clicks):
vue#next:1571 [Vue warn]: Component is missing template or render function.
I use vuejs3, vue-router, vscode, chrome on ubuntu
My code :
<!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" />
<title>Warn - Vue 3 / Router</title>
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<br />
<router-link to="/contact">Contact</router-link>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/vue-router#4.0.5/dist/vue-router.global.js"></script>
<script>
// App
const app = Vue.createApp({});
// Component
const Home = app.component("home", {
template: `<h1>Home</h1>`,
name: "Home",
});
const Contact = app.component("contact", {
template: `<h1>Contact</h1>`,
name: "Contact",
});
// Router
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes: [
{ path: "/", component: Home },
{ path: "/contact", component: Contact },
],
});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
Can you correct or give me a link for implement vue-router on vuejs3 (i'm beginner on vuejs) ? Thanks
There are two problem:
The components is registered incorrectly
app.component("home", {
template: `<h1>Home</h1>`,
name: "Home",
});
const Home = app.component("home");
See: https://v3.vuejs.org/api/application-api.html#component
If you use Vue Router in HTML files, only use Hash Mode
- history: VueRouter.createWebHistory(),
+ history: VueRouter.createWebHashHistory(),
The full code is as follows:
<!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" />
<title>Warn - Vue 3 / Router</title>
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<br />
<router-link to="/contact">Contact</router-link>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/vue-router#4.0.5/dist/vue-router.global.js"></script>
<script>
// App
const app = Vue.createApp({});
// Component
app.component("home", {
template: `<h1>Home</h1>`,
name: "Home",
});
const Home = app.component("home");
app.component("contact", {
template: `<h1>Contact</h1>`,
name: "Contact",
});
const Contact = app.component('contact')
// Router
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{ path: "/", component: Home },
{ path: "/contact", component: Contact },
],
});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
I'm trying to create a new project but I'm getting this error and I don't know why. I'm using Laravel 8, Vue and Inertia.js.
I'm not sure if these files are important but I'll add anyways
webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.js('resources/js/app.js', 'public/js').vue({ version: 2 })
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'],
})
.version();
app.js
import InertiaApp from '#inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(InertiaApp);
const app = document.getElementById('app');
app.setAttribute(':class',"{'loaded': loaded}");
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => import(`#/Pages/${name}`).then(module => module.default),
},
data(){
return{
loaded:true
}
}
}),
}).$mount(app);
app.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
#inertia
</body>
</html>
Finally the page I'm trying to show Login.vue
<template>
<div>
<h1>Login</h1>
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
console.log('mounted');
}
}
</script>
I don't know why this is happening or how to fix it.
What am I doing wrong?
I am learning Vue.js and would like to implement the bulma-calendar module in my app. I came this far, but the calendar is somehow not updating, when I am selecting a new Date.
Sorry if I can't specify the problem more, as I said declarative programming is very new to me.
The template I got from the official website of bulma-calendar: https://demo.creativebulma.net/components/calendar/v6//#integration
Vue.component("comp-calendar", {
template: `
<div>
<input ref="calendarTrigger" type="date">
</div>
`,
data: function () {
return {
date: new Date(),
};
},
mounted: function () {
const options = {
type: "date",
color: "danger",
dateFormat: "DD-MM-YYYY",
startDate: this.date,
displayMode: "inline",
};
const calendar = bulmaCalendar.attach(
this.$refs.calendarTrigger,
options
)[0];
calendar.on("date:selected", (e) => (this.date = e.date));
},
});
var app = new Vue({
el: "#app",
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<!-- import bulma-calendar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/css/bulma-calendar.min.css">
</head>
<body>
<div id="app">
<comp-calendar></comp-calendar>
</div>
<!-- import bulma-calendar -->
<script src="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/js/bulma-calendar.min.js"></script>
<!-- import https://vuejs.org -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="src/js/test.js"></script>
</body>
Any help? Thanks
EDIT: Did not help:
[...]
<input type="date">
[...]
const calendar = bulmaCalendar.attach('[type="date"]', options)[0];
calendar.on("select", (e) => (this.date = e.date))
Probably a bug in 6.0.9. Working with 6.0.0 (according to documentation here: https://creativebulma.net/product/calendar/demo) worked fine.
calendar.on("select", (e) => (this.date = e.date))
here this.date is incorect. this "this" is calendar object not the vue object
I'm new to vue, and I use vue-cli to build a project, and turn the mode to history in router/index.js. When I run it locally，it does work and shows no errors, but when I release it on the server, it does work too. However, when I go to the next page, and I refresh the page, it doesn't work,and shows many errors.
The normal page:
and when I refresh the page,the page become
and my code in router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import VueResource from 'vue-resource';
import Login from '#/views/login/login';
import List from '#/views/main/gift_list';
import Detail from '#/views/main/gift_detail';
Vue.use(Router);
Vue.use(VueResource);
export default new Router({
mode: 'history',
base: '/gift',
routes: [
{
path: '/login',
meta: {
title: '登录'
},
name: 'Login',
component: Login
},{
path: '/list',
meta: {
title: '礼品册商城'
},
name: 'List',
component: List
},{
path: '/detail/:code',
meta: {
title: '礼品详情'
},
name: 'Detail',
component: Detail
}
]
})
and my code in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="static/css/jf_gift.min.css">
<title>礼品册商城</title>
</head>
<body>
<div id="app"></div>
<script src="static/js/jquery-3.2.1.min.js"></script>
<script src="static/js/jf_gift.min.js"></script>
<script src="static/js/config.js"></script>
<script src="static/js/common.js"></script>
<script src="static/js/md5.js"></script>
<script src="static/js/md5-2.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
hope someone can help me