I am attempting to input some raw HTML into a vue template.
I get these two errors...
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-7c43939e!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/views/Find.vue
Vue template syntax error:
- invalid expression: {{{ github }}}
# ./src/components/views/Find.vue 9:2-167
# ./src/router/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-7c43939e!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/views/Find.vue
Vue template syntax error:
- invalid expression: {{{ takeAction }}}
# ./src/components/views/Find.vue 9:2-167
# ./src/router/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
The code for the file can be seen here:
<template>
<div id="find-help" class="container">
<div>
<p>{{{ github }}}</p>
<p>{{{ takeAction }}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'find-help',
data () {
return {
github: this.$t('views.find-help.paragraphs')[0],
takeAction: this.$t('views.find-help.paragraphs')[1]
}
}
}
</script>
<style scoped>
.centered {
text-align: center;
}
button {
border: 1px solid black;
padding: 10px;
background: none;
text-transform: uppercase;
min-width: 100px;
margin: 5px;
}
</style>
and the two translations are
"find-help": {
"paragraphs": [
"We are trying really hard to develop this page into an interactive map and events list. If you have any web development knowledge, we would love your help. Check our open source repository on <a href='http://www.github.com/openrefuge'>http://www.github.com/openrefuge</a>.",
"If you cannot help with development, please look at the other areas we need help with on the 'Take Action' page. Thank you!."
]
}
Am I doing something wrong that does not allow for this?
I had been following the documentation for vue and found
https://v1.vuejs.org/guide/syntax.html#Raw-HTML
and following the triple handlebar syntax it should work.
Thanks for the help!
If you would like to look at a more complete implementation, please look at https://github.com/openrefuge/openrefuge/pull/11
Triple handlebar is for Vue 1 and you are using Vue 2. Check Vue 2 docs.
Instead of <p>{{{ github }}}</p>, you need to do: <p v-html="github"></p>
Related
I'm using vite-plugin-ssr + vue-router and I want to implement critical styling.
My project has a pages folder which has the following structure:
pages/SomePage/index.vue
<template>
<div class="TestPage">
TestPage Content
</div>
</template>
<script>
export default {
name: "TestPage"
}
</script>
<style lang="css" src="./critical.css"/>
pages/SomePage/critical.css
.TestPage {
background: red;
}
I want the styles from the critical.css file to go into the <head/> tag as internal ~ <style> .SomePage {background: blue;} </style> for each route.
I tried to get inspired by the rollup-plugin-critical idea, but my knowledge is apparently not enough, because a positive result could not be achieved.
How can this be implemented?
I'm going to make Nuxt function like following sample code.
The work is being carried out without a good understanding of Nuxt.
It is not even using the tag <nuxt/>. Because it has to be made with iframe.
The reason why we want to use iframe is that we want existing information to remain even if the new content generated is tabbed.
The way I want to work doesn't seem to fit Nuxt's characteristics, but... I can't think of any other way.
The question I want is as follows.
Create tabMenu using Nuxt, and each tab content must maintain existing data even if the tab moves.
Is this possible with Nuxt?
// it just sample code, Not my question
$(function(){
function setPage(name,src){
const tabs = `<button role="button">${name}</button>`
const iframes = `<div>here is ifame area of ${name} page</div>`
$('.page-tab').append(tabs)
$('.page-frame').append(iframes)
}
function setView(number){
$('.page-frame > div').eq(number).removeClass('hide').siblings().addClass('hide')
}
$('.tab-content > li').click(function(){
const $this = $(this);
const index = $this.index()
const name = $this.text()
const src = $this.data('src')
setPage(name+index,src)
setView(index)
$('.page-tab button').click(function(){
setView($(this).index())
})
});
})
html,body,#sample {
height: 100%;
}
#sample {
display :flex;
}
aside {
flex: 0 0 auto;
height: 100%;
background-color:#eee;
}
.tab-content li {
text-align: center;
cursor: pointer;
padding: 10px 8px;
border-bottom: 1px solid #ddd;
}
main {
flex: 1 0 auto;
display: flex;
flex-direction:column;
}
.hide {
display: none !important;
}
<link href="https://cdn.jsdelivr.net/npm/reset-css#5.0.1/reset.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample">
<aside>
<ul class="tab-content">
<li role="button" data-src="https://www.reddit.com/">Apple</li>
<li role="button" data-src="https://finance.yahoo.com/quote/TSLA/">Orange</li>
<li role="button" data-src="https://github.com/dogecoin/dogecoin">Water</li>
</ul>
</aside>
<main>
<div class="page-tab"></div>
<div class="page-frame"></div>
</main>
</div>
You should really not try to do this in jQuery but in pure VueJS (or Nuxt, it's the same). Mixing declarative and imperative code is not a good idea.
For a tab functionality, you can use dynamic components to keep up the state while still toggling tabs.
I'm not sure if you're using SFC components or not, but here is a JSfiddle that may show you how to make tabs in VueJS: https://jsfiddle.net/chrisvfritz/Lp20op9o/
I'm using tailwindcss with mode:jit and vue, I use this command to create my styles
"tailwind": "NODE_ENV=production postcss ./src/assets/index.css -o ./dist/index.css"
<template>
<div class="hello">Some text</div>
</template>
<style scoped>
.hello{
#apply text-9xl text-pink-600
}
</style>
this is the result
.text-9xl {
font-size: 8rem;
line-height: 1
}
.text-pink-900 {
--tw-text-opacity: 1;
color: rgba(131, 24, 67, var(--tw-text-opacity))
}
but how I can get a result like this?
.hello {
font-size: 8rem;
line-height: 1;
--tw-text-opacity: 1;
color: rgba(131, 24, 67, var(--tw-text-opacity))
}
Update:
If I build the whole project then ".hello" is placed in my bundled js
So it should be possible, but I don't know how to generate a separated css file like that..
Update2
I have created a small repo, maybe this helps to solve my problem.
https://github.com/gregorvoinov/tailwind
Works in Vue 3 when I did 👇🏽
tailwind.config.js
ringColor: (theme) => ({
DEFAULT: theme('colors.blue.500', '#2156C9'),
...theme('colors'),
focus_border: '#2156C9',
}),
tailwind.css
focus:ring-focus_border
So i have this code as my index page and It was working, but a couple minutes later it just stopped.
the error is:
SyntaxError
Unexpected token export
Within the script section, If i remove my import then the error will go away, but I need to import it and use it. It was working with the package being imported, but I have looked this code up and down I have no idea what the heck is going on.
Anyone have any suggestions? Am I dumb and have missed something so simple?
<template>
<section class='container'>
<img class='my-4' src="~/assets/images/carousel/1.png" alt="card" />
<div class='text-center mx-auto my-4'>
<button> Send a card </button>
<p class='subtle my-4'> Or </p>
<button class='btn-blue'> Open a card </button>
</div>
<div id="qrcode"></div>
</section>
</template>
<script>
import qrcode from 'qrcode-generator-es6'; <<<<<<<<< SYNTAX ERROR AROUND HERE
export default{
data : function(){
return {};
},
methods : {
},
mounted : function(){
const qr = new qrcode(0, 'M');
qr.addData('https://app.voxicard.com/?v=vx-9FEFCA66-F592-4FF5-97B8-93B2FD78666D');
qr.make();
document.getElementById('qrcode').innerHTML = qr.createSvgTag({
margin : 0,
cellColor : function(){
return "#48658B";
},
});
},
};
</script>
<style>
#qrcode {
width: 200px;
height: 200px;
background-color: red;
}
img {
display: block;
max-height: 500px;
text-align: center;
margin: auto;
}
button {
font-size: 125%;
}
</style>
In your build property in nuxt.config.js you'll need to add a transpile block that targets this library:
build: {
transpile: [
'qrcode-generator-es6'
]
}
This is due to the fact that nuxt expects libraries to export as CJS modules and not ES6 modules.
In nuxt.config.js replace export default { on module.exports = {
I added this css rule
<style>
body {
background-color: rgb(184, 182, 182);
}
#app {
...
</style>
to my App.vue file within the tag (not scoped ;-); as learned in vue mastery courses. Which BTW are a great help!
This approach also is proposed by Babacadabra in a related post.
Everything builds fine, and the locally defined (scoped) styles of a component can be found in the dist/css folder.
But my global style declaration for the background-color disappeared. As result the website layout is different than the one I tested locally (using 'vue serve'):
The background color is not applied.
What am I making wrong?
I helped myself by adding the background-color declaration directly to my index file, but that should be a patch only. I'm looking for a final solution, so the complete workflow works as expected and local and remote versions behave the same.
UPDATE (more code):
As requested here more details, i.e. the complete App.vue. I hope that is sufficient, since to my (very basic ;.-) understanding of vue the global style declarations go into this Module.
<template>
<div id="app">
<img class="vservuLogo" alt="VservuLogo" src="./assets/VservU-Logo.png">
<HelloWorld msg="Welcome to VservU GmbH Munich"/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
<style>
body {
background-color: rgb(184, 182, 182);
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.vservuLogo {
width: 50%;
}
</style>
UPDATE2:
Since I could not reproduce that behavior in a new project, I guess I simply missed to clear the cache!