How to import component in existing HTML page, below is the example. I tried with require but no luck.
`
<html>
<head>
<script src="//unpkg.com/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
import mycomponent from './components/mycomponent.vue'
var vm = new Vue({
el: '#app',
components: {
'my-component': mycomponent
}
})
</script>
</body>
</head>
</html>
`
The import line says unexpected identifier! what went wrong here, please help.
You need type=module on the script element, and the browser will treat the inline or external script as an ECMAScript module.
Here is how your code can be transformed
<html>
<head>
<script src="//unpkg.com/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="module">
import mycomponent from './components/mycomponent.vue'
var vm = new Vue({
el: '#app',
components: {
'my-component': mycomponent
}
})
</script>
</body>
</head>
</html>
You can read more about ECMAScript modules in browsers here
Related
I made a simple html file with vue-router.
I use x-template to define component template.
It works well on chrome browser, but I found that IntelliJ IDE show me a red line.
I cannot understand why IDE can't resolve this and why my code works well on the browser even though the symbol can't be resolved.
Does anyone have an idea? (The code is written below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router_App</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<nav>
<router-link to="/top">Top page</router-link>
<router-link to="/users">User page</router-link>
</nav>
<router-view></router-view>
</div>
<script type="text/x-template" id="user-list">
<div>User page</div>
</script>
<script>
let router = new VueRouter({
routes: [
{
path: '/top',
component: {
template: '<div>Top page</div>'
}
},
{
path: '/users',
component: {
template: '#user-list'
}
}
]
})
let app = new Vue({
el: '#app',
router: router
}).$mount()
</script>
</body>
</html>
I'm using markdown vue which is a plugin for vue. It says it's supposed to have superscript and subscript functionality built in, however when I run the code for a subscript I get something that looks like this
y = x b + e
i i i
In order to have this functionality I'm trying to use this plugin but I'm having a hardtime figuring out how it's supposed to be registered globally with the MarkdownItVue plugin. I tried doing this...
import MarkdownItVue from 'markdown-it-vue'
import MarkdownItSub from 'markdown-it-sub'
MarkdownItVue.use(MarkdownItSub)
Vue.use(MarkdownItVue)
But this is working out...
I'm happy to change approaches too if there's a simpler fix for MarkdownItVue
Update
index.html
<!DOCTYPE html>
<head>
<title>Hello World</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<div id="app">
<div>
{{ msg }}
</div>
<markdown-it-vue :content="msg" class="md-body"></markdown-it-vue>
</div>
<script src="app.js"></script>
</body>
app.js
new Vue ({
el: '#app',
data() {
return {
msg: "$y_i = x_i + \\epsilon_i$"
}
}
})
It seems to be working just fine by default. See the example.
Anyway it seems from the docs that if you need to install additional markdown-it plugins, it needs to be done on component instance
const vm = new Vue({
el: "#app",
data() {
return {
content: "H~2~0 - 29^th^"
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
<div id="app">
<markdown-it-vue :content="content">
</markdown-it-vue>
</div>
The LaTeX rendering requires the stylesheet from markdown-it-vue. Make sure you're including it as a <link>:
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
new Vue({
el: "#app",
data() {
return {
content: "$y_i = x_i + \\epsilon_i$"
}
}
})
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
<div id="app">
<markdown-it-vue class="md-body" :content="content"></markdown-it-vue>
</div>
Or importing the file from markdown-it-vue/dist/markdown-it-vue.css:
demo
I cant seem to get this simple vue router work, its giving this in console GET http://127.0.0.1:8000/my-new-router 404 (Not Found), i am using it with laravel
app.js:
require('./bootstrap');
window.Vue = require('vue');
import router from './router'
Vue.component('navbar', require('./components/navbar.vue').default);
const app = new Vue({
el: '#app',
router
});
router.js:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import firstPage from './components/pages/MyFirstPage'
const routes= [
{
path: '/my-new-router',
component: firstPage
}
]
export default new Router({
model:'history',
routes
})
navbar.vue:
<template>
<div>
<h1>This is a test</h1>
<router-view></router-view>
</div>
</template>
MyFirstPage.vue:
<template>
<div>
</div>
</template>
welcome.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<div id="app">
<navbar></navbar>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Change the content of web.php to:
<?php
use Illuminate\Support\Facades\Route;
Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');
This way any route will be forwarded to vue-router.
I have index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="module">
import Vue from '/static/js/vue.js'
new Vue({
el: '#index',
data:{
message:'Hello Vue!'
}
})
</script>
<div id="index">
<p>{{ message }}</p>
</div>
</body>
</html>
also I have this file structure
But I get this error:
GET http://localhost:8080/static/js/vue.js net::ERR_ABORTED 404
Can anybody help me? I want to use Vue.js without webpack, npm or something else.
Put your Vue scripts at the end of the body and as #Terry suggested change the path of your vue.js script to '/js/vue.js':
here's a working example https://codepen.io/ellisdod/pen/PoqBRbg?editors=1010
<body>
<div id="index">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#index',
data:{
message:'Hello Vue!'
}
})
</script>
</body>
I have this simple file and using http-server it does not work. Please help. NOTE that I have a proper <head> of the HTML page .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>VueTester</title>
</head>
<body>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
})
</script>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
</body>
</html>
Ok if i understand you right, you just have a simple HTML-file and want to use vue in it.
In this case you just have to reorganize your code like this and it should work:
<html>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#app',
data: { message: 'Hello Vue.js!' }
})
</script>
If i missunderstood you just tell me and I try to edit it.