For the purpose of learning Vue, I am trying to create a very simple app that will return highlighted code from the input in real-time. I went through a few Prism tutorials and examples, but can't get this to work. Any help or guidance will be appreciated, as I am just getting started with Vue and I have a feeling that I am mixing something up.
This is HelloWorld.vue:
<template>
<div>
<h1>Prism Demo</h1>
<div id="editor">
<textarea v-model="message"></textarea>
<div>{{ highlighteddMessage }}</div>
</div>
</div>
</template>
<script>
import Prism from 'vue-prism-component'
export default {
data() {
return {
message: `var myFunction = function() {
statements
}`
};
},
computed: {
highlighteddMessage: function () {
return Prism.highlight(this.message, Prism.languages.js);
}
}
}
</script>
<style scoped>
...
</style>
And my main.js:
import Vue from 'vue'
import App from './App.vue'
import "prismjs";
import "prismjs/themes/prism-funky.css";
import "prismjs/components/prism-scss.min";
import "prismjs/plugins/autolinker/prism-autolinker.min";
import "prismjs/plugins/autolinker/prism-autolinker.css";
import Prism from "vue-prism-component";
Vue.component("prism", Prism);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
I think the problem is in how I am trying to use Prism in the computed property, but I am unable to fix it. WIll appreciate any hints on correctly using Prism in Vue.
You should add Prism to your components option components:{Prism} and then in the template wrap the code with that component and no need to create a computed property :
<div>
<h1>Prism Demo</h1>
<div id="editor">
<textarea v-model="message"></textarea>
<prism language="javascript">{{ message }}</prism>
</div>
</div>
</template>
<script>
import Prism from 'vue-prism-component'
export default {
data() {
return {
message: `var myFunction = function() {
statements
}`
};
},
components:{
Prism
}
}
</script>
Related
This is my page.vue
<template>
<div>
<v-runtime-template :template="template"></v-runtime-template>
</div>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
export default {
data: () => ({
template: `
<span>{{sample}}</span>
`
}),
components: {
VRuntimeTemplate
},
computed:{
sample(){ return "sampledata" }
}
};
My package.json:
"vue": "^2.6.11",
"v-runtime-template": "^1.10.0"
Problem : I got this error on console:
vue.esm.js?a026:628 [Vue warn]: Property or method "sample" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property..
I have read some github issues as like this told me similar problem.
Maybe someone can help me how to resolve this of my simple implementation of using this v-runtime-template library? Many thanks.
I don't know how this trick can solve my problem, but this really save my life.
Original source
by H.Eden
So, I solve my problem by creating new vue file as v-runtime-template pivot.
RuntimePivot:vue:
<template>
<v-runtime-template :template="`<div>${template}</div>`"></v-runtime-template>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
export default {
props:['template','props','listener'],
components:{
VRuntimeTemplate
},
name:"RuntimePivot",
data(){
return {
myname:'everything'
}
},
}
</script>
Then I import the runtimePivot.vue template to my Page.vue
<template>
<div>
<RuntimePivot :template="template" :props="properties" />
</div>
</template>
<script>
import RuntimePivot from "./RuntimePivot";
export default {
components:{
RuntimePivot
},
name:"Page",
data(){
return {
template:`<span>{{key}}</span>`,
properties:{key:"value"}
}
},
}
</script>
Better solution is still opened to you guys.
I'm trying to import v-movable (https://github.com/thewebkid/v-movable) in a component inside my Vue app created with Vue CLI 4, but I keep getting the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Movable>
<Intro>
<App> at src/App.vue
<Root>
Currently my main.js file looks like this:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app');
And my Intro.vue component file looks like this:
<template>
<div class="intro">
<div class="guideline">
<div class="circle start-circle"></div>
<movable class="circle end-circle">
<IconSlideUp id="icon-slide-up" />
<span class="label">Slide</span>
</movable>
<div class="line"></div>
</div>
</div>
</template>
<script>
import IconSlideUp from '#/assets/icon-slide-up.svg'
import movable from 'v-movable'
export default {
name: 'Intro',
props: {
msg: String
},
components: {
IconSlideUp,
movable
},
methods: {
}
}
</script>
<style scoped lang="scss">
...
</style>
Do I need to globally register movable in my main.js? How would I go about doing that? Any help would be very much appreciated, and please do let me know if there's any other information I can/should provide.
In the project's Github demo, there is a component import, which can be done in a SFC this way:
import movable from './components/movable';
https://codesandbox.io/s/mystifying-cartwright-yvis1
You are using the plugin installation, but doing it inside of a component instead of main.js, and it's missing Vue.use. Remove the import from your component and change main.js:
main.js
import Vue from 'vue'
import App from './App.vue';
import movable from 'v-movable';
Vue.use(movable);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
I've added a main vue app in my application. And I want to add a component to the app.
Trying to add TopMenu.vue to the App.vue:
<top-menu></top-menu> in App.vue.
Registered in main.js for app.
Am I using the single file components correct?
main.js
import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'
Vue({
el: '#app',
render: h => h(App),
components: {
'top-menu': TopMenu
}
})
App.vue:
<template>
<div class="wrapper">
<top-menu></top-menu>
<div class="container drop-shadow">
<h1>{{ message }}</h1>
<p1>{{ about }}</p1>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello kosken!",
about: "Using Parcel In A Vue.js App"
};
}
};
</script>
TopMenu.vue:
<template>
<div class="user-menu drop-shadow"></div>
</template>
<script>
export default {
name: 'top-menu',
data: function () {
return "somedata";
}
}
</script>
You should import it and use it inside your App.vue :
<template>
<div class="wrapper">
<top-menu></top-menu>
<div class="container drop-shadow">
<h1>{{ message }}</h1>
<p1>{{ about }}</p1>
</div>
</div>
</template>
<script>
import TopMenu from './TopMenu'
export default {
name: "App",
data() {
return {
message: "Hello kosken!",
about: "Using Parcel In A Vue.js App"
};
},
components: {
'top-menu': TopMenu
}
};
</script>
import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'
Vue.component('top-menu', TopMenu)
This is how you should register component globally and you can use it anywhere.
I'm struggling with this stupid bug in Vuejs. showMenu is defined in computed. The store has the right value as well.
Apparently if I remove the following from Header.vue, the console is clear from errors. But, I've always worked like that and this is the first time I have this error.
<script src="./header.js"></script>
<style src="./header.scss" lang="scss" scoped></style>
[Vue warn]: Property or method "showMenu" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
main.js
import Vue from 'vue';
import router from '#/router';
import { store } from '#vue/store/index.js';
import i18n from '#vue/i18n.js'
import App from '#vue/components/App.vue';
Vue.config.productionTip = false;
new Vue({
store,
i18n,
router,
render: h => h(App),
}).$mount(`#app`);
App.vue
<template>
<div id="app">
<div v-if="showMenu"><app-header></app-header></div>
<router-view :key="$route.fullPath"></router-view>
</div>
</template>
<script src="./App.js"></script>
<style src="./App.scss" lang="scss"></style>
App.js
import Vue from 'vue';
import AppHeader from '#vue/components/app/header/Header.vue';
export default {
name: `App`,
components: {
AppHeader,
},
data() { return {
}},
computed : {
showMenu(){ return this.$store.state.ui.showMenu; }
}
};
I am trying to figure out how to make one component inside of another one in VueJS. For instance, something like this, which unfortunately does not work (the child component appears to do nothing):
http://www.webpackbin.com/NyI0PzaL-
I am equally interested in doing this using inline-templates as much as by using the .vue file extension method as shown above.
Here is the code from the non-working example above:
main.js
import Vue from 'vue'
import App from './App.vue'
import Child from './Child.vue'
new Vue({
el: 'body',
components: { App, Child }
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<app></app>
<script src="main.js"></script>
</body>
</html>
App.vue
<template>
<div>
<h1>{{ parent_msg }}</h1>
<child></child>
</div>
</template>
<script>
export default {
data () {
return {
parent_msg: 'Hello From the Parent!'
}
}
}
</script>
Child.vue
<template>
<h1>{{ child_msg }}</h1>
</template>
<script>
export default {
data () {
return {
child_msg: 'Hello From the Child!'
}
}
}
</script>
Even though this above example is hosted on webpackbin.com, in the two projects where I would like to use this, I am using Laravel in one along with Laravel Spark in the other. In the plain Laravel app, I'm primarily using .vue files, and in the Laravel Spark app, I'm primarily using inline-templates. I'd be especially grateful for any working samples. Thanks!
UPDATE
Thanks to Linus for his answer below. It appears I need these changes to register the child component globally in my main.js file:
import Vue from 'vue'
import App from './App.vue'
import Child from './Child.vue'
Vue.component('child', Child);
new Vue({
el: 'body',
components: { App, Child }
})
Alternatively, in order to keep the child component local to be used within the parent, I could change the parent component (App.vue) as follows:
<template>
<h1>{{ parent_msg }}</h1>
<div>
<child></child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {Child},
data () {
return {
parent_msg: 'Hello from the parent component!'
}
}
}
</script>
You registered the Child component locally in the main instance, so it is not available in App.vue
Remove it form the main instance and add it to App.vue:
App.vue
<template>
<div>
<h1>{{ parent_msg }}</h1>
<child></child>
</div>
</template>
<script>
import Child from './child.vue'
export default {
data () {
return {
parent_msg: 'Hello From the Parent!'
}
},
components: {child: Child}
}
</script>
..or register it globally with Vue.component('child', Child) in your main.js file. Then it's available everywhere.