I'm developing a vue3 project.
main.js;
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...
//just try...
app.mount("#app");
and my public/index.html
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And my App.vue;
<template>
<button #click=openNewPage()>create new page</button>
<span>{{message}}</span>
<router-view />
</template>
<script>
methods:{
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
}
</script>
my store object;
export default createStore({
state: {
message:'Hello'
}
});
and my second.html;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
</head>
<body>
<div id="appSecond" style="height:100%">
<template>
<span>{{message}}</span>
</template>
</div>
</body>
</html>
When I open the second screen with the OpenNewPage method, I cannot access both the store object and the components I want to use do not work. I was try it;
second.js
const app2 = createApp({
});
export { app2 };
and my method
import { app2 } from "../second.js";
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
if (t) {
t.onload = function () {
t.window.app = app2;
app2.mount("#appSecond");
}
}
}
Somehow I try to run in second.html but I get a warning like "[Vue warn]: Failed to mount app: mount target selector". The code didn't work anyway. Can you help me?
openNewPage() can't run a script for the newly opened page; only the new page could run its own scripts. When openNewPage() tries app2.mount(), it's running that code on its own page (not the new one), leading to the error you observed.
Solution
Remove the mounting code from openNewPage() so that it only opens the new page:
export default {
openNewPage() {
window.open('second.html', …);
}
}
Update second.html to load the script that mounts the app, and remove the unnecessary <template> within the <div id="appSecond">:
<body>
<div id="appSecond" style="height:100%">
<span>{{message}}</span>
</div>
<script src="./second.js"></script>
</body>
In second.js, add the code that mounts your app:
// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#appSecond')
Related
I use Laravel 8 with laravel/ui 3.4 for front end.
I want to create fixed sidebar, footer and an area for router-view.
routes/web.php
Route::view('/{any}', 'home')->where('any', '.*');
resources/home.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id="app">
<router-view />
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
resouces/js/app.js
require('./bootstrap')
import { createApp } from 'vue'
import router from './router'
createApp({}).use(router).mount('#app')
resouces/js/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Shop from '../pages/Shop'
const routes = [
{
path: '/',
name: 'shop',
component: Shop
}
]
export default createRouter({
history: createWebHistory(),
routes
})
resouces/js/components/Sidebar.vue
<template>
This is fixed sidebar. This includes dynamics content
</template>
How to include this sidebar in home.blade.php ?
Or is there any way to create default Vue layout with child components?
SOLVED: I create a sidebar at js/components/layouts/MainSidebar.vue
js/app.js
import mainsidebar from './components/layouts/MainSidebar.vue'
const app = createApp({})
app.component('main-sidebar', MainSidebar)
home.blade.php
<div id="app">
<main-sidebar></main-sidebar>
<router-view />
</div>
Use <main-sidebar></main-sidebar> not <main-sidebar />
I am trying to render <script> tags but unable to do so. Although javascipt is already enabled for the browser. Screenshot of the error message on browser console.
Code snippet.
import './App.css';
import React from "react";
import {Helmet} from "react-helmet";
class App extends React.Component {
render () {
return (
<div className="application">
<h1>My name is </h1>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="ffwesfwef" ></script>
<Helmet>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="wefewfwefwe" ></script>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://myurl.net/example" />
</Helmet>
</div>
);
}
};
export default App;
Here is the vue object I create in main.js with a value : myName
import Vue from "vue";
const vm = Vue.createApp({
data () {
return {
myName: 'su'
}
}
});
vm.mount('#app');
and I'd like to show 'su' in index.html
here is html code
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
123
<div id="app">
name : {{ myName }}
</div>
<script type="module" src="/src/main.js">
</script>
</body>
</html>
and it does't work and show
name : {{ myName }}
Can anyone help pls thanks!
The reason it doesn't work is because you're never actually importing Vue. Checking your browser console would have shown you that Vue is undefined.
import Vue from "vue";
needs a build tool like webpack and will resolve the import against your node_modules folder.
Since you are directly importing Vue in a module right in your page, you need to import from a path available to the browser:
123
<div id="app">
name : {{ myName }}
</div>
<script type="module">
import * as Vue from 'https://unpkg.com/vue#3.0.11/dist/vue.esm-browser.js';
const vm = Vue.createApp({
data () {
return {
myName: 'su'
}
}
});
vm.mount('#app');
</script>
I am getting a blank page when using import. I have a simple program that is just to test the import statement. I don't know why I am not getting any output. Here is my code in app js:
import TestComponent from "./components/Testcomponentfile"
pageBuild();
function pageBuild(){
TestComponent();
}
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
And Here is the index.HTML:
<html lang="en">
<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">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script src="./JS/app.js"></script>
</body>
</html>
What am I missing??
Use type="module" in your html while using the script
<html lang="en">
<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">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script type="module" src="./JS/app.js"></script>
</body>
</html>
calling pageBuild(); after defining the function did not solve the problem>
I am using google chrome browser. It should be working.
import TestComponent from "./components/Testcomponentfile"
function pageBuild(){
TestComponent();
}
pageBuild();
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
an update to the first answer
tc.js
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
ap.js
import TestComponent from "./tc.js"
function pageBuild(){
console.log(TestComponent());
}
pageBuild();
tested and it works
I am actually using the pages/_document.js hook to add Bootstrap and jQuery to my pages, by the way I set the <Head>
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<title>Default title</title>
<link rel="stylesheet" href="/static/lib/bootstrap3/css/bootstrap.min.css" />
</Head>
<body>
<Main/>
<NextScript/>
<script src="/static/lib/jquery3/jquery-3.3.1.min.js" />
<script src="/static/lib/bootstrap3/js/bootstrap.min.js" />
</body>
</html>
)
}
}
Now I would like to set a different Title,for my pages. Is it possible to used <Head> outside of Document ? I mean in <div> like this:
const ContactPage = () => {
return (
<div>
<Head>
<title>You better contact us!</title>
</Head>
<div className="page-body">...</div>
</div>
)
}
And if possible, will it overwrite or merge what is already set in pages/_document.js ?
You want to use the next/head component:
import Head from 'next/head'
export default () =>
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
See the docs: https://nextjs.org/docs/api-reference/next/head