Using vuejs via es6 modul in index.html without node - javascript

I am trying to add a vuejs frontend to my java backend (spring boot) without using node. I created a simple index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello Test!</title>
</head>
<body>
<h1>test test</h1>
<div id="app"></div>
<script type="module" src="main.js"></script>
</body>
</html>
which is supposed to import the following main.js (located in the same folder) as module:
import Vue from './vue.js'
import {
Navbar
} from './component/navbar.js'
import {
MainTemplate
} from './templates/main-template.js'
new Vue({
el: '#app',
components: {
'navbar': Navbar
},
template: MainTemplate
})
When accessing localhost in either chrome or firefox, I get the header 'test test', but an error saying 'Failed to load resource: the server responded with a status of 404 ()' regarding the main.js.
I have found different tutorials stating that this should be working. Trying out different ways of importing the main.js didn't change the error.
As I really need to get this to work I would really appreciate any tips on that! Thanks in advance!

Related

vuejs without build production code warning

I am using vuejs to make a simple page. Although I can make similar page without any framework, I wanted to try vuejs and now it it almost production ready.
Thing is it is simply single js and html file and it throws following warning.
You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
Let's say I want to keep things this way, how do I remove this warning and get single page html and js file?
// main.js
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://unpkg.com/vue#3"></script>
<script src="main.js"></script>
</body>
</html>
- index.html
- assets
-- js
--- main.js
-- css
--- styles.css
As suggested by #IVO GELOV, and mentioned in guide here, it is working for me now.
Use below url for production use and to remove the warning.
https://unpkg.com/vue#3/dist/vue.global.prod.js

How to call JS file/React code within Flask project? getting errors [duplicate]

This question already exists:
how to get React file recognized within Flask project
Closed 2 years ago.
I'm currently trying to put together a Flask + React project. Just a simple Flask project, with some react code for the js part.
I have had some difficulty getting the js file (which contains the react code) to run at all in the project.
This is my project structure, standard for flask:
The app route is defined in the routes.py file in the project root; right now, just a single home page (the html file)
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route("/qubits")
def qubits():
return render_template('qubits.html')
# http://localhost:5000/qubits
if __name__ == "__main__":
app.run(debug=True)
The html file is pretty simple, and it is linking properly to my css (im able to pull in css elements fine). Its just the js file thats not returning any divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>nstem</title>
<link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
</head>
<body>
<div class="indexBox1"></div>
<h1>: )</h1>
<script type="text/javascript"
src="{{ url_for('static', filename='js/index.js') }}"></script>
</div>
</body>
</html>
However, nothing is being returned on the webpage from these two js files:
*index.js*
import React from 'react';
import ReactDOM from 'react-dom';
import './nstem.css';
import Qubit from './qubits';
ReactDOM.render(
<Qubit />,
document.getElementById('root')
);
* qubits.js *
import React from 'react';
import ReactDOM from 'react';
function Qubit() {
const section = 'lists';
return (
<div>Allah'u'abha</div>
);
}
export default Qubit;
Im pretty stumped; ive played with this so much today and cant figure out where the gap is. Please help, and thanks so much.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>nstem</title>
<link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
</head>
<body>
<div class="indexBox1"></div>
<h1>: )</h1>
{/**/}
<div id="root"></div>
We call this a “root” DOM node because everything inside it will be managed by React DOM.
{/**/}
<script type="text/javascript"
src="{{ url_for('static', filename='js/index.js') }}"></script>
</div>
</body>
</html>
Check the html template file DOM node is missing.

Import Vue breaks Vue

Can someone explain the WHY of how Import Vue from 'vue' breaks the rendering of the template? I've seen other answers on how to work around this, but none of them have gone into the details of why it breaks.
I ran npm init and npm install vue, not using the CLI.
I created an index.html file:
<!DOCTYPE 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">
<title></title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<first-task></first-task>
{{msg}}
</div>
<script src="app.js"></script>
</body>
</html>
and an app.js looking like:
import Vue from 'vue/dist/vue.js'; //Remove to fix
Vue.component('first-task', {
template: '<p>Hello World!</p>'
});
var app = new Vue({
el: '#app',
data: {
msg: "Hello World"
}
});
Removing the import, it renders fine, but it's unclear to me why this happens. My only guesses are that the default new Vue doesn't reference the full build, or that the implicit Render() doesn't get called, but I'm unsure of how to look into this more.
import statements may only appear in a javascript module
<script type="module" src="app.js"></script>
Should fix it, though you would not need to import Vue with your current code anyway, as you have seen

How to fetch JSON data in a Vue SPA?

I created a sample Vue application via #vue/cli 3.0:
vue create testapp
cd testapp
npm run serve
As part of mounted(), I wanted to fetch some local data:
fetch("users.json")
.then(r => r.json())
.then(r => this.users = r.hits.hits.map(x => x._source))
where users is defined in data().
The response is
<!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">
<link rel="icon" href="/favicon.ico">
<title>example.com</title>
<link href="/about.js" rel="prefetch"><link href="/app.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but example.com doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
I tried to move the JSON file to static in the root of the application (at the same level as src, then in assets and then everywhere I could think of - the answer is always the one from the app which assumes that this is a request for HTML/JS/CSS content, and not raw data.
Where should such a static file be placed?
You may assign the JSON into your data at the beginning, try this in your App.vue
<template>
<div>
<div v-for="user in users">{{user}}</div>
</div>
</template>
<script>
import json from './users.json'
export default{
data(){
return{
users: json
}
}
}
</script>
And also make sure your main.js has import App.vue
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Locate your users.json at the same level as src(which is same with App.vue) is fine.
Hope this may help you! Cheers

Angular2 Selector did not match any elements with bundle and ECM6

I have a very simple angular2 project, configured to work with Gulp, Bundle and ECM6. Bundle will create a big file which contains the translated ECM5 of angular plus my app.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Test</title>
<script src="bundle.js"></script>
</head>
<body>
<mainapp>
</mainapp>
</body>
</html>
The angular app is defined as follows:
import {Component, View, bootstrap} from 'angular2/core';
export class mainComponent {
static get annotations() {
return [
new Component({
selector: 'mainapp'
}),
new View({
template: `<div>Hello!</div>`
})
];
}
}
bootstrap(mainComponent);
However when I load it, I keep on getting an error
"selector 'mainapp' did not match any element"
The problem was that I was including the bundle.js before the mainapp component was defined in the HTML. This fixed the issue.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Test</title>
</head>
<body>
<mainapp>
</mainapp>
<script src="bundle.js"></script>
</body>
</html>
Update:
<script src="bundle.js" defer></script>
Seems to also solve the problem regardless of the order of the elements.

Categories