I am trying to write a Vuepress plugin to make use of App Level enhancement and install a Vue plugin. But I can't seem to get this to work. Can you please take a look at the code below and see what is wrong?
{.vuepress/config.js}
module.exports = {
plugins: [
require('./builder.plugin.js')
]
}
{.vuepress/builder.plugin.js}
module.exports = (option, ctx) => {
return {
enhanceAppFiles: [{
name: 'builder-plugin',
content: `export default ({ Vue }) => {
Vue.component('b-header', {
name: 'b-header',
template: '<div id="header"><slot /></div>'
})
}`
}]
}
}
{README.md}
# Introduction
<b-header>Test from component</b-header>
The final error I get is:
Unknown custom element: <b-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I actually found the answer. The above did not work because I was mixing client site code with runtime code by using a plugin.
The trick was to use enhanceAPP hook.
ref: https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration
Related
I'm trying to use VueGtag to track Google Ads conversions (signups) in Vue2 application.
I've added the following code to main.js:
import VueGtag from 'vue-gtag'
...
Vue.use(VueGtag, {
config: { id: 'AW-123456890AB' }
})
What code should I add to my signup callback function? The documentation is very sparse. Is it something like this?
register() {
...
this.$gtag.event('sign_up')
...
}
You can try the following:
this.$gtag.event('conversion', {
'send_to': 'TAG_ID/CONVERSION_LABEL',
'key': value
})
Make sure you add a config property with the tag id:
Vue.use(VueGtag, {
config: { id: "TAG_ID" },
disableScriptLoad: true
});
Someone asked a similar question in this issue from the 'vue-gtag' package repository.
I'm wondering how to display a number in HTML that was created dynamically later on in the code. For instance I initialize the value reportDataLength in data(), and I tested that it was returning the right value by doing a console.log(), but now I want to display this value in HTML?
name: 'notification-tray',
data() {
return {
headers: [
{
text: 'Notifications',
value: 'Body',
width: '380px',
},
],
reportData: [],
reportDataLength: 0,
};
},
async created() {
await this.getReportDataLength();
},
methods: {
async getReportDataLength() {
... this.reportDataLength = this.reportData.length;
console.log(this.reportDataLength);
},
},
};
But obviously when I do something like this,
<span class="d-none">Notification Button</span>
<span class="badge">this.reportDataLength</span>
it doesn't work correctly. The other solutions I saw for similar problems used JQuery, and I feel like there's a simple way to reference this, but I can't seem to find it out.
okay so if you are using pure Javascript , u can use this in your javascript function :
Document.getElementsByClassName('badge').innerHtml=this.reportDataLength ;
otherwise if you are using vue js you can try something like this in your html file :
<span class="badge">{{reportDataLength}}</span>
You can do document.getElementById("ID-HERE").innerHTML = "new stuff", but be warned that setting innerHTML is dangerous.
The example code snippet # https://github.com/Azure/azure-sdk-for-js/tree/%40azure/communication-identity_1.0.0-beta.4/sdk/communication/communication-chat does NOT compile.
import { ChatClient, ChatThreadClient } from '#azure/communication-chat';
import { AzureCommunicationTokenCredential } from '#azure/communication-common';
let createChatThreadRequest =
{
topic: 'Preparation for London conference',
participants:
[
{
user: { communicationUserId: '<USER_ID_FOR_JACK>' },
displayName: 'Jack'
},
{
user: { communicationUserId: '<USER_ID_FOR_GEETA>' },
displayName: 'Geeta'
}
]
};
let createChatThreadResponse = await chatClient.createChatThread(createChatThreadRequest);
let threadId = createChatThreadResponse.chatThread.id;
my package.json:
"#azure/communication-identity": "1.0.0-beta.4",
"#azure/communication-calling": "1.0.0-beta.6",
"#azure/communication-chat": "1.0.0-beta.4",
"#azure/communication-common": "1.0.0-beta.5",
"#azure/communication-signaling": "1.0.0-beta.2",
Latest attempt:
createChatThreadRequest:
{
"topic": "Ghost Frog",
"participants": [
{
"user": {
"communicationUserId": "ey...Ug"
},
"displayName": "frog"
}
]
}
POST error 400
https://########.communication.azure.com/chat/threads?api-version=2020-11-01-preview3
RestError: {"error":{"code":"BadRequest","message":"One or more validation errors occurred.","details":[{"message":"The value provided for Id is invalid.","target":"Participants[0].Id"}]}}
The error message is looking for a property named 'Id'. The spec does NOT require an Id. Arg.
sorry you are running into issues and thank you for reaching out!
Someone on our team has tested out your code snippet and SDK versions and it compiled. Can you specify the error codes you are seeing? It will help us understand the issue better. Thanks!
given you are using version 1.0.0-beta.4 I can verify the code snippet you have is correct.
In the latest release of the JS SDK 1.0.0-beta.5 the user property was in fact renamed to id, however previous versions should still work as expected.
Can you verify if the latest version works for you? The error you are seeing can also occur if an invalid communicationUserId is provided.
Given your current version and code, if the issue is persisting we would like to investigate.
We try to keep these docs up to date during public preview but if you run into issues please let us know:
https://github.com/Azure/azure-sdk-for-js/tree/master/sdk/communication/communication-chat
https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/chat/get-started?pivots=programming-language-javascript
Basically, Im using Nuxt 2.9.2, and trying to using innerHTML method to inline a Google Optimize script, but whenever i run npm run generate, the code transforms certain aspects even though __dangerouslyDisableSanitizers is whitelisting innerHTML..
This is my Script in Nuxt Config head object
script: [
{
innerHTML: `(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer', 500 , ${JSON.stringify(
{ [process.env.GOOGLE_OPTIMIZE_ID]: true }
)})`
}
],
__dangerouslyDisableSanitizers: ['innerHTML']
},
Which renders out as the below, tried multiple different ways. could not get it to inline as expected
!function(e,n,t,a,c,s,d){n.className+=" "+t,s.start=1*new Date,s.end=d=function(){n.className=n.className.replace(RegExp(" ?"+t),"")},(e[a]=e[a]||[]).hide=s,setTimeout(function(){d(),s.end=null},500),s.timeout=500}(window,document.documentElement,"async-hide","dataLayer",0,{"GTM-XXXXXX":!0})
should be
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer', 500 , 'GTM-XXXXXX'': true }
)})
script: [
{
innerHTML: `window.MY_CONST = 'abcd1234'`,
type: 'text/javascript',
charset: 'utf-8',
},
],
__dangerouslyDisableSanitizers: ['script', 'innerHTML'],
Considering that there is single file component (as shown in the guide),
<style>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
How can the same thing be done without Vue loader in non-modular ES5/ES6 environment?
Considering that the style is scoped,
<style scoped>
.example {
color: red;
}
</style>
Is there a way to implement scoped CSS in non-modular environment, too? If there's none, is there a way to implement it in modular environment (Webpack), but without Vue loader and custom .vue format?
Instead of using the template instance in the Vue component, you can harness a 'closer-to-the-compiler alternative' with the render function without the need for the Vue Loader or compiler. You can add any additional attributes with the second parameter in the createElement function and this will give you a lot of flexibility on top of just styles.
See the Render Functions section in the guide for more info and the full options allowed in the data obj:
https://v2.vuejs.org/v2/guide/render-function
https://v2.vuejs.org/v2/guide/render-function#The-Data-Object-In-Depth
Note: The caveat here is that the style will only apply to the component it is declared in, so it might not be able to used across multiple components of the same class like CSS would be. Not sure if thats also what you want to achieve.
An example from the docs catered to this use case:
Vue.component('example', {
// render function as alternative to 'template'
render: function (createElement) {
return createElement(
// {String | Object | Function}
// An HTML tag name, component options, or function
// returning one of these. Required.
'h2',
// {Object}
// A data object corresponding to the attributes
// you would use in a template. Optional.
{
style: {
color: 'red',
fontSize: '28px',
},
domProps: {
innerHTML: 'My Example Header'
}
},
// {String | Array}
// Children VNodes. Optional.
[]
)}
});
var example = new Vue({
el: '#yourExampleId'
});
It can be achieved putting the scope manually, as vue-loader does automatically.
This is the example of the documentation. Adding some kind of ID, "_v-f3f3eg9" in this case, to scope the class only for that element.
<style>
.example[_v-f3f3eg9] {
color: red;
}
</style>
Vue.component('my-component', {
template: '<div class="example" _v-f3f3eg9>hi</div>'
});
I use Rollup (+ Bublé) + Vue.js all the time. It's pretty simple and fast.
The Rollup config is like:
import vue from 'rollup-plugin-vue';
import resolve from 'rollup-plugin-node-resolve';
import buble from 'rollup-plugin-buble';
const pkg = require('./package.json');
const external = Object.keys(pkg.dependencies);
export default {
external,
globals: { vue: 'Vue' },
entry: 'src/entry.js',
plugins: [
resolve(),
vue({ compileTemplate: true, css: true }),
buble({ target: { ie: 9 }})
],
targets: [
{ dest: 'dist/vue-rollup-example.cjs.js', format: 'cjs' },
{ dest: 'dist/vue-rollup-example.umd.js', format: 'umd' }
]
};
I've made a boilerplate repo:
git clone https://github.com/jonataswalker/vue-rollup-example.git
cd vue-rollup-example
npm install
npm run build