My vue.js app routing is not working, please help, there is not a lot of code , simply copy paste this code in your index.html, you'll see the weird errors . its like we cant use scripts when using the vue router.:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Starter Vue.js Bt4</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<!-- Required scripts -->
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div class="wrapper" id="app">
<router-link to="/users">Users</router-link>
<router-link to="/home">Go to HOME</router-link>
<router-view></router-view>
<script type="text/x-template" id="users">
<p>
<ul id="demo">
<li v-repeat="items" >
{parentMsg}} {{childMsg}}
</li>
</ul>
</p>
</script>
<script type="text/x-template" id="home">
<button v-on:click="count++">Vous mavez cliqué {{ count }} fois.</button>
</script>
</div>
</body>
<script>
var Home = {
data: function () {
return {count: 0}
},template: "#home"
}
const Users= {
template: "#users",
data: {
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
}
}
const routes = [
{ path: '/home', component:Home},
{ path: '/users', component: Users}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
router
}).$mount('#app')
</script>
this is the error it doesnt work, please help : Error nothing works, displaying users is impossible :
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. vue.js:634:17
[Vue warn]: Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:634:17
[Vue warn]: Property or method "childMsg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:634:17
[Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Anonymous>
<Root> vue.js:634:17
[Vue warn]: Failed to resolve directive: repeat
(found in <Anonymous>)
AngularJs was working all of the time, why this is not working ?
Thanks for helping me, nothing works, files .vue not working either, no explanation, im going back to angularJs thank you
EDIT :
template literal not working with routing neither :
const Users= {
template: `
<p>
<ul id="demo">
<li v-repeat="items" >
{parentMsg}} {{childMsg}}
</li>
</ul>
</p>
`,
data() {
return {items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]}
}
}
the error :
[Vue warn]: Failed to resolve directive: repeat
[Vue warn]: Property or method "childMsg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Anonymous>)
EDIT 2: It is working with the following template litteral, but i dont want this kind of templating at all , it is not easy to write inside of the javascript, I need to use the balise or .vue files, and nothing works .:
const Users= {
template: `
<p>
<ul id="demo">
<li v-for="item in items" >
{{item.childMsg}}
</li>
</ul>
</p>
`,
data() {
return {items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]}
}
}
Edit, after reading this : https://vuejs.org/2015/10/28/why-no-template-url/
I will try to write templates inside of the JS code
EDIT : Resolved there :Unable to add any module without WebPack
You have to update couple of things
const Users= {
template: "#users",
data() {
return {
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
};
}
}
You haven't added Home component but still you are using, just remove Home from routes
const routes = [
{ path: '/users', component: Users}
]
Related
I'm using Vue 3 with composition API and CSS Modules. Trying to highlight unused and undefined classes. It works correctly in <script setup>, but there are no errors in tag <template>.
<script setup>
import styles from 'view/pages/contact-form.css'; /* It has error, as it no classes used from here (except .contact-form) */
const form = styles['contact-form']; /* no error, it's correct */
const form2 = styles['contact-error']; /* error, because no class in css, it's correct */
</script>
<template>
<div :class="styles['contact-for']"> /* expected to have error because class doesn't exist, not correct */
<div :class="styles['contact-form__header']">
<div :class="styles['contact-form__header-section']">
<span :class="styles['contact-form__title']">
{{ messages.title }}
</span>
</div>
</div>
</div>
</template>
Library was used https://www.npmjs.com/package/eslint-plugin-css-modules
Also tried https://www.npmjs.com/package/postcss-modules-extract-imports because postcss is used in project
eslintrc.js config:
module.exports = {
globals: {
BUNDLE: true,
NODE_ENV: true,
},
plugins: ['postcss-modules'],
extends: [
'plugin:postcss-modules/recommended',
],
rules: {
'postcss-modules/no-unused-class': 'error'
},
settings: {
'postcss-modules': {
'baseDir': 'src/'
}
}
};
Am having this problem with vue 2.6 and vue router 3.
I have set up the router and vue instance like so:
const Settings = {
props: ['showForm'],
data: function () {
return {
// some data
}
},
template: '#Settings'
}
const Norm = {
props: ['showForm'],
data: function () {
return {
//some data
}
},
template: '#test'
}
const routes =[
{path: '/',component: Norm},
{path:'/settings', component: Settings}
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
data: function () {
return {
//some data
isConfigured: false,
},
},
created: function (){
//some codes called
},
components: {
'Settings': Settings,
'Norm': Norm
},
router: router
})
And the index.html file looks like this:
<div id='app'>
<div class="nav-bar">
<ul>
<li><router-link to="/">Home</router-link ></li>
<li><router-link to="/Settings ">Settings</router-link></li>
</ul>
</div>
<router-view></router-view>
<script type="text/x-template" id="settings">
<section :showForm="isConfigured">
{{ showForm +',' +isConfigured}}
</section>
<script type="text/x-template" id="test">
<section :showForm="isConfigured">
{{showForm +',' +isConfigured}}
</section>
</script>
</div>
<script src="vue-router.js">
<script src="vue.js"></script>
<script src="app.js"></script>
It seems the data is not passed to the showForm prop because it renders as:
Undefined, false
And it seems the Norm prop receives no data neither can it access data in the vue instance because it renders:
Undefined, Undefined.
Vue responds with the following error
[Vue warn]: Property or method "showForm" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
[Vue warn]: Property or method "isConfigured" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
I believe the second error above is for the norm component. While the first error is logged twice for both components. Please what am I doing wrong.
Try moving your x-templates outside of the application template.
Also, the section element does not have a showForm property. You need to send your props into the components using the router. You will have to use a common source of truth for your isConfigured property to use it in both the app component and the router components.
So for an showForm property:
<script type="text/x-template" id="test">
<section v-show="showForm">
I am configured
</section>
</script>
You would pass props in like this:
const routes =[
{path: '/',component: Norm, props: {showForm: isConfigured},
{path:'/settings', component: Settings, props: {showForm: isConfigured} }
]
Finally, you do not need to declare your routes as child components of the app.
I'm trying to set up Vue3 so that I can use it via npm + webpack. For some reason the component does not get mounted and no error is shown. If I instead use unpkg it works. How can I make the npm + webpack option work?
I have "vue": "^3.1.5" in my package.json and the following webpack config:
module.exports = {
mode: 'production',
entry: {
provider: './src/components/provider.js',
requester: './src/components/requester.js',
},
optimization: {
minimize: false
},
output: {
path: `${__dirname}/../public`,
filename: '[name].js',
}
}
requester.js:
import { createApp } from 'vue'
createApp({
template: `
<div>
<div>
<h2>Números recibidos</h2>
{{ receivedNumbers }}
<ul>
<li v-for="n in receivedNumbers">{{ n }}</li>
</ul>
</div>
</div>
`,
data() {
return {
receivedNumbers: [1,2,3],
numberRequestIsOpen: false,
}
},
}).mount('#requester-component');
requester.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>requester</h1>
<div id="requester-component"></div>
<script src="requester.js"></script>
</body>
</html>
resulting html
<h1>requester</h1>
<div id="requester-component" data-v-app=""><!----></div>
<script src="requester.js"></script>
In the other hand, if I add <script src="https://unpkg.com/vue#next"></script> in the head tag of my html and change the js to:
Vue.createApp({
//
}).mount('#requester-component');
then the resulting html is
<h1>requester</h1>
<div id="requester-component" data-v-app=""><div><div><h2>Números recibidos</h2> [
1,
2,
3
] <ul><li>1</li><li>2</li><li>3</li></ul></div></div></div>
<script src="requester.js"></script>
which is the expected output.
Link to the repo in case it helps to play around. Last commit adds the unpkg has, and the previous one has the npm version
https://github.com/vuejs/vue-next/issues/4275
In order to use the functionality of the vue.js template, you need to load the finished package with the compiler and runtime, but vue.js by default loads the runtime only version, so you need to explicitly specify the version (vue.esm-bundler.js)
Adding
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm-bundler.js'
}
}
solved the issue.
I am trying to nest two components in vuejs as I get started in it. I just don't want to jump into cli or webpack. So I wanted to do that without import/export. From the browser's console I get the warn:
[Vue warn]: Error compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
1 | This is the Component A
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
found in
--->
Tried a similar problem with answer here.
VueJS nested components
but it seems to be an old version of vuejs. I could not make it work that way.
index.html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="vue.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
<component-a>
</component-a>
</div>
<script src="app.js"></script>
</body>
</html>
app.js:
var ComponentB = {
template: "<p>This is the Component B</p>",
}
var ComponentA = {
template: '<p>This is the Component A</p><component-b></component-b>',
components: {
'component-b': ComponentB
}
}
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
}
});
Expected that template of component b show up inside the template of complement a.
In your component template you must have only one HTML element. You can wrap your elements in div.
var ComponentA = {
template: '<div><p>This is the Component A</p><component-b></component-b></div>',
components: {
'component-b': ComponentB
}
I have a fairly simple setup which is failing with these errors:
Property or method "fruit" is not defined on the instance but
referenced during render. Make sure that this property is reactive
[etc.]
Error in render: "TypeError: Cannot read property 'name' of undefined"
Cannot read property 'name' of undefined
Not sure whether it's because the x-template referencing method is buggy. I see it's not used much.
Here's my code:
<div id="main">
<h1>Vue Component Prop Error</h1>
<script type="text/x-template" id="foo">
<p>{{fruit.name}}</p>
</script>
<my-thing :fruit="fruits[1]"></my-thing>
</div>
<script>
Vue.component('my-thing', {
template: '#foo',
props: {
fruit: Object
}
});
var app = new Vue({
el: '#main',
data: {
fruits: [{
id: 1,
name: 'apple'
},{
id: 2,
name: 'banana'
},{
id: 3,
name: 'carrot'
}]
}
})
</script>
What am I missing? (I'd expect to see "banana" on the screen.)
Codepen: https://codepen.io/MSCAU/pen/WagOjz
Move the x-template out of the div that the main Vue instance controls:
<div id="main">
<h1>Vue Component Prop Error</h1>
<my-thing :fruit="fruits[1]"></my-thing>
</div>
<script type="text/x-template" id="foo">
<p>{{fruit.name}}</p>
</script>
https://codepen.io/anon/pen/zmJzJO
Having the template inside of #main is causing Vue to try to render it prior to when you want.
Moving the template outside of #main will allow it to be used as the template for <my-thing> without being rendered inside of #main.
<div id="main">
<my-thing :fruit="fruits[1]"></my-thing>
</div>
<script type="text/x-template" id="foo">
<p>{{fruit.name}}</p>
</script>
https://codepen.io/anon/pen/NOLgBz