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
Related
why is document.getElementById() not working in VS Code?? I keep getting this error: "Uncaught ReferenceError ReferenceError: document is not defined". I'm new to VS Code but I'm assuming the reason It's not working is that I need to install some extension to make it work. The same code is working on Replit but not VS code. I installed JS(ES6) Snippets, Open-in browser, Live Preview and Live Server. It's very simple 2-line code just to experiment but it's not working. It's driving me crazy!
let head = document.getElementById('change')
head.innerText = 'hello'
I bet that you are not running this in an index.html file in the browser, so this is not VS Code problem, you are probably running this in a node console or something, there is no html or document in what you are trying to test and that is why you are getting this error.
<!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="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h1>HELLO</h1>
<hr />
<h2 id="change"></h2>
<script>
let head = document.getElementById('change')
head.innerText = "why isn't this working?";
</script>
</body>
</html>
Definitely has nothing to do with VS Code.
Make sure your html file is referencing your javascript file.
<!DOCTYPE html>
<html>
<body>
<h1>This is my HTML file</h1>
<script src="script.js"></script>
</body>
</html>
The script element should be in your html with the name of your js file
<script src="script.js"></script>
This not the vscode issue please check you are running the right file
I have the following problem while integerating paypal sdk in my vuejs project
55:5 error 'paypal' is not defined no-undef
index.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="<%= BASE_URL %>favicon.ico">
<script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</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>
Checkout.vue
<template>
<div class="checkout"></div>
</template>
<script>
export default {
props: {
amount: {
type: Number,
default: 0.01
}
},
mounted: function(){
paypal.Buttons().render('.checkout')
}
}
</script>
What I want to achieve is, to render paypal buttons each time, the view is loaded. It seems, that I am missing something.
I also tried to use vue-plugin-load-script but it gives me the same error
I am not using checkout.js, which seems not supported anymore by paypal
if I add the paypal.Buttons().render('.checkout') function call inside index.html just below the paypal js script tag, it seems to work. But it would load the buttons only the first time the application is loaded. It also gives an error, if there is no div container with a "checkout" class found.
All research gives me either results for old and deprecated versions or does not work for me. What am I doing wrong?
Thank you
It seems, that the error was caused by eslint. after removing eslit it seems to work:
npm remove #vue/cli-plugin-eslint
However I wonder, how to solve this problem, without removing eslint.
I am having trouble loading snipcart correctly, it picks up the api key on localhost and shows the number of items in cart however when deployed to netlify, it will briefly flash up the number of items in cart when the page is loaded indicating that the api key is correct however it then comes up with the error
public API key not found. Attribute data-api-key must be set on #snipcart tag.
I am using react to render it, and have taken it down to the minimal boilerplate to see if anything in react could be causing this but I still have the same problem.
moving <div hidden id="snipcart" data-api-key={{ API_KEY }}></div> to app.js file and it works, but in index.html it doesn't work
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">
<link href ="https://fonts.googleapis.com/css2?family=Open+Sans&family=Lexend+Zetta&family=Poppins:wght#400;500;700&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css" />
</head>
<body>
<div id="root"></div>
<script async src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key={{ API_KEY }}></div>
<script src="./index.tsx"></script>
</body>
</html>
Putting this in your html doesnt work since the {{API_KEY}} is I assume from your framework. Since the html code is not compiled using your framework, it doesnt do anything with the <div hidden id="snipcart" data-api-key={{ API_KEY }}> tag.
To make this work, put your api key instead of the {{API_KEY}} variable.
Cheers,
Lea from Snipcart
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
I'm following along with an AngularJS class, specifically the AngularJS Fundamentals class, on PluralSight and am creating a demo app using AngularJS. I've followed along perfectly and believe that I've done everything right, but for some reason, my variable isn't being printed to the screen using my controller. I'm getting an error in my console that says "failed to load resource EventController.js 404." How do I fix this?
Here's my EventDetails.html:
<!doctype html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.date}}
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/underscore-1.4.4.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/angular/angular.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers/EventController.js"></script>
</body>
</html>
and then here's my EventController.js:
eventsApp.controller('EventController',
function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
date: '5/17/2018',
time: '11:02 am'
}
}
);
There are the only two things that we've created so far and I'm really confused as to where I messed up. Thanks!
EDIT: Here's my file structure:
I've figured out that removing the '/' at the beginning of all of my script source files allows them to load correctly