VSCode not properly importing my main.js file - javascript

VScode is not importing my main.js file. I don't understand what I am doing wrong either. The index.html is right next to the main.js but it is not able to find it. I have imported many js files into html before so why is it breaking on me now? Does anyone have any idea's?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
<!--Mount App-->
<script>
const mountedApp = app.mount;
</script>
</body>
</html>
Here is the js file, I am not able to use it because it's not connecting to the html so there is it is just spiting out how Vue is not defined.
const app = Vue.createApp({
data() {
return{
product: 'Socks'
}
}
})
And the directory looks like this
Intro-to-Vue
-Assest
-Images
Socks.png
Index.html
main.js
Any help would be awesome. Thanks

You're using the vue 3 syntax with vue 2 CDN script :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
</body>
</html>
and main.js like :
new Vue({
el: '#app',
data() {
return {
product: 'Socks'
}
}
})

Related

VueJS doesn't recognize my variable between curly braces

I'm moving my very first steps into VueJS but I'm already stuck.
I'm simply trying to display a variable, but even if the syntax look correct to me, I get
{{product}}
displayed instead of the actual product name. Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{product}}</h1>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>
And here's the JS:
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
Thank you!
You should use the CDN of version 3 since the syntax of Vue 3 :
<script src="https://unpkg.com/vue#3"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue#3"></script>
</head>
<body>
<div id="app">
<h1>{{product}}</h1>
</div>
<!-- Import App -->
<script>
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
</script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>

How to start an application dynamically with second.html in Vue3?

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')

Cannot pass value from main.js to index.html

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>

My Vue and index.js are not working together

Why is my Vue and index.js import not working?
In my live server the text just shows up as {{ message }}
the html and js files are located in the same directory
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>Pomodoro Timer</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
<!-- Javascript -->
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

laravel 5.8 doesnt display react view freshly installed

i am very new in laravel + react js. I followed the tutorial and i don't know what is happening why output doesn't out.
Here is my problem. I already installed laravel 5.8 and react js, but when i call the id named example, it doesn't return any view.
Now here is the laravel code:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
</head>
<body>
<div id="example"></div>
<script src="/js/app.js"></script>
</body>
</html>
after that here is the react javascript:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
the location of the javascript file is in: resources/js for the app.js

Categories