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.
Related
I'm doing a FE based on [THIS VUE TEMPLATE][https://www.creative-tim.com/product/vue-material-dashboard-pro]
I am trying to register a component locally, but I keep getting the error:
"103:5 error The "BFCookieCard" component has been registered but
not used"
I did not have any success with the answers shared in:
I'm getting an error of 13:5 error The “Home” component has been registered but not used vue/no-unused-components
component has been registered but not used vue/no-unused-components
Vue component defined but not used error message. How do I use it properly?
Remove 'component has been registered but not used' in eslint for Vue.js
My Files are as follows:
BFConsentCookie.vue
<template>
<h1> HELLO </h1>
</template>
<script>
export default {
name: "bf-cookie-card",
data() {
return {};
},
beforeMount() {
},
}
Login.vue
<template>
<div>
<bf-cookie-card>
</bf-cookie-card>
</div>
</div>
</template>
<script>
import { BFCookieCard} from "#/components";
export default {
components: {
BFCookieCard,
},
data() {
return {};
},
}
index.js
import BFCookieCard from "./Cards/BFCookieCard.vue";
export {
BFCookieCard
}
The problem is the capital F in BFCookieCard, replace it with BfCookieCard.
In your login.vue you can also import your component like that:
components: {
BfCookieCard: () => import('path to component file.vue'),
},
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>
I have two components:
App.vue
Sidekick.vue
In my App.vue component, I have a property that I would like to access from Sidekick.vue
App.vue
<template>
<div id="app">
<p>{{ myData }}</p>
<div class="sidebar">
<router-view/> // our sidekick component is shown here
</div>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
myData: 'is just this string'
}
}
}
</script>
Sidekick.vue
<template>
<div class="sidekick">
{{ myData }}
</div>
</template>
<script>
export default {
name: 'Sidekick'
}
</script>
I would like access to myData (which is declared in App.vue) from Sidekick.vue
I have tried importing App.vue from within Sidekick.vue by doing something like:
Sidekick.vue (incorrect attempt)
<script>
import App from '#/App'
export default {
name: 'Sidekick',
data () {
return {
myData: App.myData
}
}
}
</script>
I have read about props - but have only seen references to child / parent components. In my case, Sidekick.vue is shown in a div inside App.vue (not sure if this makes it a "child"). Do I need to give access of myData to <router-view/> somehow?
UPDATE: (to show relationship between App.vue and Sidekick.vue
index.js (router file)
import Vue from 'vue'
import Router from 'vue-router'
import Sidekick from '#/components/Sidekick',
import FakeComponent from '#/components/FakeComponent'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: '/fakecomponent'
},
{
path: '/sidekick',
name: 'Sidekick',
component: Sidekick
},
{
path: '/fakecomponent',
name: 'FakeComponent',
component: FakeComponent
}
]
})
export default router
Sidekick.vue gets rendered when we hit /sidekick
Just keep in mind, the rule of thumb is using props to pass data in a one-way flow
props down, events up.
https://v2.vuejs.org/v2/guide/components.html#Composing-Components
Quick solution:
Global event bus to post messages between your <App/> and <Sidekick/> components.
https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
Long term solution:
Use a state management library like vuex to better encapsulates data in one place (a global store) and subscribe it from your components tree using import { mapState, mapMutations } from 'vuex'
When you have parent-child communication, the best and recommended
option is to use props and events. Read more in Vue docs
When want to have shared state between many components the best and
recommended way is to use Vuex.
If you want to use simple data sharing you can use Vue observable.
Simple example: Say that you have a game and you want the errors to be accessible by many components. (components can access it and manipulate it).
errors.js
import Vue from "vue";
export const errors = Vue.observable({ count: 0 });
Component1.vue
import { errors } from 'path-of-errors.js'
export default {
computed: {
errors () {
get () { return errors.count },
set (val) { errors.count = val }
}
}
}
In Component1 the errors.count is reactive. So if as a template you have:
<template>
<div>
Errors: {{ errors }}
<button #click="errors++">Increase</button>
</div>
</template>
While you click the Increase button, you will see the errors increasing.
As you might expect, when you import the errors.js in another component, then both components can participate on manipulating the errors.count.
Note: Even though you might use the Vue.observable API for simple data sharing you should be aware that this is a very powerful API. For example read Using Vue Observables as a State Store
App.vue:
<router-view pass_data='myData'/>
Sidekick.vue:
export default {
name: "Sidekick",
props: ["pass_data"],
created() {
alert("pass_data: "+this.pass_data)
}
}
If App.js(Parent) and Sidekick(Child)
App.js
in Template
In script
import Sidekick from './Sidekick.vue:
Sidekick.vue
props: ['myData']
now you can access myData anywhere in sidekick.
In template myData and
in scripts this.myData
I'm trying to use TipTap with Nuxt but can't seem to figure out why it won't work. I've read issues on the repo and used their suggestions but I just get these errors:
ERROR in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-state/dist/index.mjs
Can't import the named export 'ReplaceStep' from non EcmaScript module (only default export is available)
ERROR in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-view/dist/index.mjs
Can't import the named export 'Selection' from non EcmaScript module (only default export is available)
ERROR in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-transform/dist/index.mjs
Can't import the named export 'Slice' from non EcmaScript module (only default export is available)
Set up
My set up is pretty simple and echoes this github issue
/components/forms/RichText.vue
<template>
<no-ssr>
<editor-content :editor="editor" />
</no-ssr>
</template>
<script>
import { Editor, EditorContent } from 'tiptap'
export default {
components: {
EditorContent
},
data () {
return {
editor: null
}
},
mounted () {
this.editor = new Editor({
content: '<p>This is just a boring paragraph</p>'
})
},
beforeDestroy () {
// Always destroy your editor instance when it's no longer needed
this.editor.destroy()
}
}
</script>
/components/global/LocalisedAttributes.vue
<template>
<div>
<rich-text />
</div>
</template>
<script>
import RichText from '~/components/forms/RichText.vue'
export default {
components: {
RichText
}
}
</script>
I've tried adding 'prosemirror-view' and 'tiptap' to build.transpile array in nuxt.config.js but it hasn't had any effect.
If anyones got it working on Nuxt I'd be grateful for any insight in to their set up.
Looks like it was an issue with Lerna, I've switched to yarn workspaces and now things seem to be working!
Okay, so I've been bumping my head on the walls trying to figure out what the hell's going on here. See, I've been trying to load a module dynamically in Vue.js. What confuses me here is that the following actually works (i.e. when I hardcode the path to my module):
currentModal(){
return () => System.import(`../../ride/modals/boarding.vue`);
},
However, if I do this:
currentModal(){
let path = "../../ride/modals/";
return () => System.import(`${path}boarding.vue`);
},
I get the following error:
Cannot find module '../../ride/modals/boarding.vue'.
Then, if I go the other way around and do:
currentModal(){
let content = "boarding.vue";
return () => System.import(`../../ride/modals/${content}`);
},
The error becomes:
Error in render: "TypeError: undefined is not a function"
Obviously, something's different when I use a variable instead of hardcoding the path... but for the life of me, I can't figure out what. Anyone has any clue?
As Bergur mentioned in his comment, the problem is indeed that webpack cannot resolve a string that doesn't yet exist (issue explained here). What I did instead is add a property to my component that I called "content-list" and in the main page, I fill it with my desired components like so:
parent component:
<template>
.....
<modal-window
:init-visible="modalVisible"
:content-list="contentList"
#modalClosed="modalClosed">
</modal-window>
.....
</template>
<script>
import mainContent from './modals/main.vue'; //I doubt this is still useful
import otherContent from './modals/other.vue'; //I doubt this is still useful
export default{
data(){
return {
modalVisible: false,
contentList: {
main: () => System.import("./modals/main.vue"),
other: () => System.import("./modals/other.vue")
},
}
},
}
</script>
Inside the modal component:
<template>
...
<div ref="scrolling-pane" class="scrolling-pane" :class="{ 'scrolling-pane-normal': !isDirty, 'scrolling-pane-dirty': isDirty }" key="b">
<transition name="content-slide"
:enter-active-class="enterClassName"
:leave-active-class="leaveClassName"
#before-enter="beforeEnter"
#before-leave="beforeLeave"
#after-enter="afterEnter"
#after-leave="afterLeave">
<keep-alive>
<component :is="currentModal" #switchContent="onSwitchContent"></component>
</keep-alive>
</transition>
</div>
...
</template>
<script>
export default{
components: {
},
props: {
initVisible: Boolean,
contentList: Object
},
data(){
return {
currentContent: this.contentList['main']
}
}
...
</script>