I wrote hello world vue js 3 simple Programme. then it gives following error. I want to pass vue property value to HTML value. but it doesn't work . please help me to resolve this .
package.json
{
"name": "myfirstproject",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"vite": "^2.7.2",
"vue": "^2.6.14"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>Hello world {{msg}}</h1>
</div>
<script type="module">
import { createApp } from 'vue/dist/vue.esm.browser'
const app = createApp({
data(){
return {
msg: "Sri Lanka"
}
},
}).mount('#app');
</script>
</body>
</html>
I edited package.json , and add "vue": "^3.2.26" then delete node_modules and run yarn install ,
Then problem has been fixed
Related
I did a fresh laravel 9.19 installation with vue scaffolding and vite.js. everything works well just that the vue example component that comes with the fresh install of laravel refused to be rendered on the browser.
my environment
chrome Version - 108.0.5359.125 (Official Build) (64-bit)
node version - 19.3
Laravel 9.19
basically, as of today i'm using the latest version of everything.
I get a blank white screen on my browser with no errors on the console but the vue component is not rendering
I have tried suggestions from Laracast which is similar to my issue but nothing worked
content of my files
package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#popperjs/core": "^2.11.6",
"#vitejs/plugin-vue": "^3.0.1",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.7.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.56.1",
"vite": "^3.0.0",
"vue": "^3.2.37"
}
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
// 'resources/sass/app.scss',
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
resouces/js/app.js file
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import './bootstrap';
import { createApp } from 'vue';
/**
* Next, we will create a fresh Vue application instance. You may then begin
* registering components with the application instance so they are ready
* to use in your application's views. An example is included for you.
*/
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
// app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
// });
/**
* Finally, we will attach the application instance to a HTML element with
* an "id" attribute of "app". This element is included with the "auth"
* scaffolding. Otherwise, you will need to add an element yourself.
*/
app.mount('#app');
resouces/views/layouts/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() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
#vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app">
{{-- vue component goes here --}}
</div>
</body>
</html>
resources/js/components/ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
So i changed the boilerplate code in my resouces/js/app.js file and it worked. i don't know why.
i changed this
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
app.mount('#app');
to this
import './bootstrap';
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
createApp(ExampleComponent).mount('#app');
So I recently just encountered this issue. I got a blank page when I run npm run dev. Thankfully on the console, I got the error message in the image below.
So I went ahead to my app.js to change my Vue import from
import { createApp } from "vue";
to
import { createApp } from 'vue/dist/vue.esm-bundler';
hi iam tring to learn about vue-router and i watched more than 1 tutrial but i got this error 'Cannot use 'in' operator to search for 'path' in undefined 'and the router-link tags unclickable
here is my versions in pack json
"dev": "vite",
"build": "vite build"
"devDependencies"
"axios": "^0.27",
"laravel-vite-plugin": "^0.5.4",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vite": "^3.0.9"
},
"dependencies"
"#vitejs/plugin-vue": "^3.0.3",
"vue": "^3.2.36",
"vue-loader": "^17.0.0",
"vue-router": "^4.1.3"
app.js
import './bootstrap';
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue'
import About from './components/about.vue'
import {createRouter} from 'vue-router'
import {createWebHistory} from 'vue-router'
const routes =[
{path : "/", component :ExampleComponent ,name : 'home'},
{path : "/about", component : About ,name : 'about'}
]
const router =createRouter({
el : '#app',
history : createWebHistory,
routes,
})
const app =createApp()
app.use(router)
app.mount('#app')
welcome.blade
<!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>
#vite('resources/css/app.css')
</head>
<body>
<div id="app">
<router-link to ="/">home</router-link>
<router-link to ="/about">about</router-link>
#vite('resources/js/app.js')
</div>
</body>
</html>
Not sure about the error yet, but the links are wrong because you're using named routes so you should use another syntax for the links in the HTML (welcome.blade):
https://router.vuejs.org/guide/essentials/named-routes.html#named-routes
Or remove the name attributes from your routes in app.js.
Also pay a bit more attention to indentation and whitespace as that might also throw the compiler off and might be the reason you get the error it should look like this:
const routes = [
{path : "/", component: ExampleComponent, name: "home"},
{path : "/about", component: About, name: "about"}
]
Hope this helps you out.
The simple process below does not work, though I do not understand why ...
using :
npm
vue
parcel
mkdir samat
cd samat
npm init -y
npm install vue --save
package.json
{
"name": "samat",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.12"
}
}
Then I create index.html and index.js:
<!DOCTYPE html>
<html>
<head>
<script src="./index.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Finally, I run parcel index.html, and then look at localhost:1234 but see only this in the browser:
{{message}}
To use in-DOM templates (i.e., the <div id="app>{{ message }}</div>), import the full build of Vue that includes the runtime template compiler:
// import Vue from 'vue'
import Vue from 'vue/dist/vue.esm.browser' // full build
How do I solve the warning multiple instances of vue detected! please?
My index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style/cssreset.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-reboot.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../node_modules/bootstrap-vue/dist/bootstrap-vue.css">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class='app' id='app'>
</div>
<script src="code/app.js"></script>
</body>
</html>
My app.js file:
import Vue from '../../node_modules/vue/dist/vue.common'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
const app = new Vue
({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
and my package.json file has this (which doesn't seem to make a difference):
"alias": {
"vue" : "./node_modules/vue/dist/vue.common.js"
},
The alias field in the package.json needs to change to "vue": "/../node_modules/vue/dist/vue.common.js". Parcel will not complain if your alias field is wrong when compiling so you have to be very careful about specifying the correct path yourself, depending on your build command's root folder.
I found two solutions ( maybe this will save time for someone).
1: add this line in the webpack config file :
let whiteListedModules = ['vue', 'bootstrap-vue']
2: Change the import line to :
Vue.use(require('bootstrap-vue/dist/bootstrap-vue.common.min'));
source
I have a nw.js app with this package.json:
{
"main": "index.html",
"name": "test_app",
"window": {
"toolbar": false,
"position": "center",
"min_width": 800,
"min_height": 500,
"as_desktop": true,
"resizable": true,
"frame": true,
"chromium-args": "--ignore-certificate-errors"
},
"webkit": {
"plugin": true,
"page-cache": true
}
}
My index.html includes this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<iframe src="https://www.example.com"></iframe>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function myfunc(){
alert("my func");
}
</script>
</body>
</html>
The problem:
My site (src of iframe) https://www.example.com have a self signed certificate, so if I try to load in console give me this error:
Failed to load resource: net::ERR_INSECURE_RESPONSE
Why --ignore-certificate-errors don't extended inside iframe child?
Thanks in advance!
I found the solution in one of the issues on nw.js github repo.
Basically you need to use:
"chromium-args": "--allow-running-insecure-content --ignore-certificate-errors",
And it has to go outside of the window object (e.g. after name property) in the package.json file.