VueJS doesn't render on MacOS (Safari and Chrome) - javascript

I have a weird problem. My VueJS app (from CDN) uses Vuetify.
It works on Ubuntu and Windows, but my client sees the raw VueJS code on his Safari and also on Chrome on the iPad. Do you know where is the problem?
The simplified code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.js"
integrity="sha512-nqIFZC8560+CqHgXKez61MI0f9XSTKLkm0zFVm/99Wt0jSTZ7yeeYwbzyl0SGn/s8Mulbdw+ScCG41hmO2+FKw=="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container fluid>
....
</v-container>
</v-main>
</v-app>
</div>
<script>
class RepairsCalculator {
...
}
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
new Vue({
el: '#app',
delimiters: ['[[', ']]'],
vuetify: new Vuetify(),
data: {
...........
}
})
</script>
</body>
</html>

It sounds like your CDN or server may be misconfigured. It might be worth checking out the HTTP "Content-Type" headers to make sure it is sending out the right MIME type. You could examine this in chrome dev tools, by clicking on the network tab.
Chrome on iOS actually is based on WebKit, so it is running the same engine as Safari and their similar behavior should not be surprising.

Related

Use Vue Composition API in a script tag in index.html

I was trying to replicate this question with a MCVE, but I was not able to use the Composition API in a <script> tag in index.html.
This is my index.html:
<!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">
<title>Vue3 script</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue#next/dist/vue.global.js"></script>
<script type="module">
const app = Vue.createApp({
el: "#app",
setup() {
console.log("foo")
}
})
</script>
</body>
</html>
The console only outputs this:
You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
GET http://127.0.0.1:5500/favicon.ico [HTTP/1.1 404 Not Found 0ms]
Call .mount(elementId) at the end to make it work
const app = Vue.createApp({
setup() {
console.log("foo")
}
})
app.mount("#app")

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

Hamburger icon not showing in Vuetify 2.0

I am upgrading to the new vuetify 2.0, and I noticed the hamburger icon is not showing on the app bar.
In their examples with the same code, it does show.
https://vuetifyjs.com/en/components/app-bars
https://codepen.io/anon/pen/rXLyzE?&editable=true&editors=101
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-app-bar absolute dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
</v-app-bar>
</v-app>
</div>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
})
});
</script>
</body>
</html>
What am I missing?
Thanks
You're just missing the icon CSS:
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css" rel="stylesheet">
See https://vuetifyjs.com/en/getting-started/quick-start#cdn-usage
Update:
From the original question:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
This will be pulling in the icons from Material Design, see:
https://material.io/tools/icons/?style=baseline
Despite the naming similarity, this is a different icon set from Material Design Icons (MDI):
https://materialdesignicons.com/
The search icon comes from Material Design, it would be called mdi-magnify in MDI.
By default Vuetify uses MDI. If you want to switch everything across to Material Design there is a guide in the documentation:
https://vuetifyjs.com/en/customization/icons#install-material-icons
Current Version
I'm using Vue CLI 3 and I had the same issue.
vuetify v2.0.0
#mdi/font v4.4.95
Solution
first, please add #mdi/font library to your package.son
$ yarn add #mdi/font
second, import materialdesignicons.scss to your SCSS like this.
// application.scss
$mdi-font-path: "~#mdi/font/fonts" !default;
#import '~#mdi/font/scss/materialdesignicons';
After compile

How to 'import' Vuejs component into index.html?

I use Vue.js CDN and I put all the Vuejs code inside a script tag in index.html.
It works fine. However, I'd like to use this component to add tags functionality.
But I receive this error :
This is how my code looks like:
<script>
import VTagInput from 'v-tag-input'
Vue.use(VTagInput)
var app = new Vue({
el: '#app',
delimiters: ["[[", "]]"],
components: {VTagInput},
tags: []
data: {
errors: [],
I npm installed the package as specified in the github repo.
This is the head tag:
<head>
<meta charset="utf-8">
<meta name="author" content="Seif Elmughrabi">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="(( url_for('static', filename='materialize.css') ))" media="screen, projection">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="(( url_for('static', filename='style.css') ))">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Insurance Policy Planner</title>
</head>
You cant import another files in browser using 'import' you need to use webpack, however you can use this cdn to load the plugin in your html after loading vue.js file, https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js , here is a working example
new Vue({
el:"#app",
data: {
tags: ['foo', 'bar']
}
})
<script src="https://unpkg.com/vue#2.5.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js"></script>
<div id="app">
<v-tag-input v-model="tags"></v-tag-input> {{tags}}
</div>
You should load the script where VTagInput is located in your head, right after Vue. Then no need to import anything, VTagInput will be accessible globally

vue js failed to "reactive"

i am following this tutorial https://v2.vuejs.org/v2/guide/#Declarative-Rendering. the page works fine without error on console but i cant change the message via console to showing "app2.message" and give me error "#app2 is not defined". its not working like they said
We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.
here is my script:
window.addEventListener('load',
function() {
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
}, false);
this is how i include the js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>3R Inventory | #yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/app.css') }}">
<script type="text/javascript" src="{{ URL::to('js/app.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('/js/tigaer.js') }}"></script>
</head>

Categories