Why the following code failed to show the markdown-editor?
Why Failed to show markdown-editor using VueSimpleMDE by CDN?
<html>
<head>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<link href="https://unpkg.com/simplemde#1.11.2/dist/simplemde.min.css" rel="stylesheet">
<script src="https://unpkg.com/simplemde#1.11.2/dist/simplemde.min.js"></script>
<script src="https://unpkg.com/vue-simplemde#0.4.6/dist/vue-simplemde.min.js"></script>
</head>
<body>
<script>
Vue.use(VueSimpleMDE);
</script>
<div id="vue-app">
{{ content }}
<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
</div>
<script>
var vue = new Vue({ "el": "#vue-app", data: { content: "kdfljads" } });
</script>
</body>
</html>
Related
I have application on aspnet mvc and import vuejs v3 cdn and i like use vuetify but i dont know how do it.
its my code example
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewData["Title"] - MVCAndVue</title>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
<script>
const {
ref,
reactive,
} = Vue;
//Define Vue app
const App = {
data() {
return {
};
},
methods: {
},
setup(props, context) {
}
};
// Create new Vue app
const app = Vue.createApp(App);
app.mount("#app");
</script>
You are facing this issue because you included Vuetify 2.x which is not compatible with Vue 3. So, use Vuetify 3 instead.
Now, the right way to use Vuetify via CDNs, you need to follow these steps-
Import Vuetify CSS in your head tag-
<link
href="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
If you want to use material design icons, then import this CSS link in your head tag too-
<link
href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
Import the Vuetify script in your body tag-
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.js"></script>
If you are planning to use Vue3 also via CDN, then import the Vue script in your body tag-
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
Here is a complete working HTML file with all necessary imported CDNs for Vue3 and Vuetify3-
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.js"></script>
<script type="text/x-template" id="app-template">
<v-app>
<v-card
class="mx-auto"
width="400"
append-icon="mdi-human-greeting"
>
<template v-slot:title>
Title
</template>
<v-card-text>
Description
</v-card-text>
</v-card>
</v-app>
</script>
<script>
const { createApp } = Vue;
const { createVuetify } = Vuetify;
const vuetify = createVuetify();
const app = createApp({
template: "#app-template",
})
.use(vuetify)
.mount("#app");
</script>
</body>
</html>
To read more about using CDNs, read here-
https://next.vuetifyjs.com/en/getting-started/installation/#cdn
https://next.vuetifyjs.com/en/features/icon-fonts/#material-design-icons
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.
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 render a component but I get the error: property or method
"joke" is not defined in is not defined on the instance but referenced during render. I am using the dad jokes api to get data via the axios http library. Here is my code:
var joke = Vue.component('joke', {
template: '#joke',
data() {
return {
jokes: []
};
},
created() {
axios
.get('https://icanhazdadjoke.com/search', {
headers: {
Accept: 'application/json'
},
params: {
limit: 30
}
})
.then(response => {
this.jokes = response.data.results;
});
}
});
new Vue({
el: '#main'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue Dad JOkes</title>
<!--styles-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--scripts-->
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main">
<joke></joke>
</div>
<template id="joke">
<ul>
<li v-for="joke in jokes"></li>
<p>{{joke.joke}}</p>
</ul>
</template>
<script src = "app.js" charset="utf-8"></script>
</body>
</html>
It's a simple issue with the html, you had ended the </li> before using {{joke}}
Change
<ul>
<li v-for="joke in jokes"></li>
<p>{{joke.joke}}</p>
</ul>
to
<ul>
<li v-for="joke in jokes">
<p>{{joke.joke}}</p>
</li>
</ul>
Here's your working example:
var joke = Vue.component('joke', {
template: '#joke',
data() {
return {
jokes: []
};
},
created() {
axios
.get('https://icanhazdadjoke.com/search', {
headers: {
Accept: 'application/json'
},
params: {
limit: 30
}
})
.then(response => {
this.jokes = response.data.results;
});
}
});
new Vue({
el: '#main'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue Dad JOkes</title>
<!--styles-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--scripts-->
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main">
<joke></joke>
</div>
<template id="joke">
<ul>
<li v-for="joke in jokes">
<p>{{joke.joke}}</p>
</li>
</ul>
</template>
<script src = "app.js" charset="utf-8"></script>
</body>
</html>
I need some help. The input box doesn't seem to be appearing. I am not using app.js as it gives me problem with Buefy. Anything I did wrongly? Thanks.
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/vue2.4.2.js') }}"></script>
<script src="{{ asset('js/buefy0.4.6.js') }}"></script>
<script src="{{ asset('js/axios.min.js') }}"></script>
</head>
<body>
<div id="app">
<hr>
<div class="container">
<datepicker name="test" placeholder="European Format ('d-m-Y')" :config="{ dateFormat: 'd-m-Y', static: true }"></datepicker>
</div>
</div>
<script type="text/javascript">
Vue.use(Buefy.default)
var app = new Vue({
el: '#app',
components: {
'datepicker': DatePicker
},
data: {
name:'test'
},
methods: {
}
});
</script>
</body>
</html>
I think it should be:
components: {
'datepicker': Buefy.Datepicker
}
In the app.js file
import Buefy from 'buefy';
Vue.use(Buefy);
Do not use
Vue.use(Buefy.Default);