hi I'm trying to autocomplete/typeahead component for Vue 2 and Bootstrap 4
This is my code.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css" rel="stylesheet">
</head>
<body>
<div id="container">
<vue-bootstrap-typeahead
v-model="query"
:data="['Canada', 'USA', 'Mexico']" />
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>
<script>
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead';
Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead);
new Vue({
el: '#container',
data: {
value: '',
},
});
</script>
</body>
</html>
Unfortunately this is not working due to following errors.
SyntaxError: import declarations may only appear at top level of a module
Source map error: request failed with status 404 Resource URL:
https://unpkg.com/vue-bootstrap-typeahead Source Map URL:
VueBootstrapTypeahead.umd.min.js.map
It would be great if someone can help me on this.
The code <script src="https://unpkg.com/vue-bootstrap-typeahead"></script> has imported the VueBootstrapTypeahead, and became a property of window.You don't need import again. when we talk about import, often the module concert come to us too. import declarations was often used in an app which need be transformed by tools, such as babel,webpack or rollup.
Please add this to the <head> of your document before the <link> tags:
<meta charset="UTF-8">
Related
I'm making a website with vue2, but I cannot use node.js to install libraries. Now I want to use libraries such as vuetify, but I don't know how to import it in my js files.
Is there a solution? The format of my js file is:
const app = new Vue({
el: '#app',
})
When I import it on top of const app, there's an error saying can't be imported outside of the module.
Update: ScreenShot of my code
enter image description here
You can add the following code to your HTML file. Remember to wrap your app in v-app though.
Refer to Use vuetify with CDN
Working example on codepen
Could you create a Codepen link with your events.html file? It's easier to debug that way.
index.html
<!DOCTYPE html>
<html>
<head>
<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#6.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">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>Hello world</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
</html>
I am pretty new to Vue.js.
I am trying to build a project without cli.
I've tried to add the CDN into the index.html.
and create a app.js file , add it to index.html and it works well.
Then I watch some youtube and tutorial, the idea of component kicks in and I am trying to add the Single-File Components into the project.
But I do not know how to structure the files so that it could work with the components.
Here are what I've got so far , could someone please tell me what's wrong here？
Any suggestions would be appreciated.
Many Thanks.
Oren
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, shrink-to-fit=no">
<title>new Vue project</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
App.vue
<template>
<div class="container">
<Header />
</div>
</template>
<script>
import Header from './src/components/Header'
export default {
name:'App',
components:{
Header,
},
data(){
return{
test:'oren testing'
}
}
}
</script>
SFCs require a build step and is recomended
When using standard Vue without a build step and mounting to in-DOM templates, it is much less optimal because:
We have to ship the Vue template compiler to the browser (13kb extra size)
The compiler will have to retrieve the template string from already instantiated DOM
The compiler then compiles the string into a JavaScript render function
Vue then replaces existing DOM templates with new DOM generated from the render function.
If you still don't want a build step, take a look at petite-vue
I'm trying to get a basic VueJS application working using the code
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue#3"></script>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import MyComponent from './my-component.js'
createApp(MyComponent).mount('#app')
</script>
</body>
</html>
But all I see is the error of 'Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.' when I browse to localhost:3000 on Firefox. I've been at this for hours but I can't figure out why it doesn't work when I've copied it from the VueJS page 'getting started'. I've used the commands 'npm run dev', 'npx serve' and 'npm run build' but they all return the same error in the web developer tools' console.
Any help or guidance on this would be appreciated.
It seems that you are using the global build of Vue where all APIs are exposed under the global Vue variable (line 4 in your example).
Solution 1
Remove the import line for vue and prepend createApp with "Vue.":
//REMOVED: import { createApp } from 'vue'
import MyComponent from './my-component.js'
Vue.createApp(MyComponent).mount('#app') //NOTE that "Vue." has been added
Solution 2
Another solution would be to add an importmap block. That way, you can refer to vue as specified in the importmap and the corresponding url is resolved from there. Unfortunately, this is (at the moment) only supported by Chromium-based browsers. Luckily, a shim is available to allow use of importmap on non-Chromium browsers.
See below for an example, where the shim is injected above the importmap-block. Note that the script-line for loading vue has been removed from the header-block.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script async src="https://ga.jspm.io/npm:es-module-shims#1.4.6/dist/es-module-shims.js"></script>
<script type="importmap">
{ "imports": { "vue": "https://unpkg.com/vue#3/dist/vue.esm-browser.js" } }
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue' createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')
</script>
</body>
</html>
I am new in vue. i tried to render a vue component. but i got error.
i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
</div>
<script src="components/app.js"></script>
</body>
</html>
app.js
import Index from "./Index.vue"
new Vue({
el: '#head',
render: h => h(Index)
});
both app.js and Index.vue are in same folder.
Please healp me to solve this..
The error occurs because browser do not recognize import statement.
Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.
Vue.component('Index', {
data() {
return {
value: 'Index component'
}
},
template: `<h2>{{ value }}</h2>`
})
new Vue({
el: '#head'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
<index />
</div>
<script src="components/app.js"></script>
</body>
</html>
I am trying to workout a HelloWorld example of Bootstrap3 and X-editable. I am attaching my page source code in this post. I am facing two issues.
I am getting the following error when i use mode as 'popup' as soon as i click on the editable link.
TypeError: this.getCalculatedOffset is not a function
If i switch from popup to inline at-least the page appears however, the buttons dont appear correctly.
Any feedback would be appreciated. Page Source is below:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>X-Editable Bootstrap Hello World!</title>
<link rel="stylesheet" href="twitter-bootstrap/css/bootstrap.css" type="text/css"/>
<link href="bootstrap-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello World Bootstrap</h1>
<div class="hero-unit">
<p>Hey.. this is my very first XEdit-able Bootstrap site.</p>
<!-- superuser -->
superuser
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="twitter-bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript">
$.fn.editable.defaults.mode = 'inline';
$(document).ready( function(){
//$('#username').editable();
$('#username').editable( {
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});
} );
</script>
</body>
</html>
Your bootstrap css and js files must be from 2.xx version of bootstrap, that's a problem.
Use x-editable for bootstrap 2 or update your bootstrap to version 3+.
I had the same issue after upgrading from Bootstrap 2 to Bootstrap 3.
I had upgraded Bootstrap's CSS, X-Editable's CSS and JS, but had forgotten to upgrade Bootstrap's JS which was still for v2.
Don't forget to update all files:
Bootstrap 3 .css and .js
X-Editable for Bootstrap 3 .css and .js
Probably a bit late, but hopefully that can still help someone.