Develop Reference

Convert Vue.JS project to Nuxt.JS project

I want to create Nuxt.JS project from Vue.JS project.
Vue.js Project
You can see the full Vue.JS project here. This project uses npm package vue-conversational-form which can help turn web forms into conversations using Vue.js.
Project has 3 files:
index.html
index.js
myForm.js
Code of: index.html
<style>
html, body {
height: 90%;
width: 96%;
background: #eee;
margin: 10px auto;
}
</style>
<div id="app"></div>
Code of: index.js
import Vue from 'vue'
import myForm from './myForm';
new Vue({
el: '#app',
template: '<myForm />',
components: {
myForm
}
})
Code of: myForm.js
import Vue from 'vue'
import { ConversationalForm } from 'conversational-form';
export default Vue.component('MyForm', {
template: '<div class="myForm"></div>',
styles: [`
.myForm {
position: relative;
height: 100%;
width: 100%;
}
`],
methods: {
setupForm: function () {
const formFields = [
{
'tag': 'input',
'type': 'text',
'name': 'firstname',
'cf-questions': 'What is your firstname?'
},
{
'tag': 'input',
'type': 'text',
'name': 'lastname',
'cf-questions': 'What is your lastname?'
}
];
this.cf = ConversationalForm.startTheConversation({
options: {
submitCallback: this.submitCallback,
preventAutoFocus: true,
},
tags: formFields
});
this.$el.appendChild(this.cf.el);
},
submitCallback: function () {
var formDataSerialized = this.cf.getFormData(true);
console.log("Formdata, obj:", formDataSerialized);
this.cf.addRobotChatResponse("You are done. Check the dev console for form data output.")
}
},
mounted: function () {
this.setupForm()
},
});
Nuxt.js Project
Now here you can see my tried to convert this Vue.Js project to Nuxt.js project from codesandbox.
Project has 2 files:
index.vue (page)
MyForm.vue (component)
Code of: index.vue
<template>
<div id="app">
<MyForm></MyForm>
</div>
</template>
<script>
import MyForm from '~/components/MyForm.vue'
export default {
components: {
MyForm
}
}
</script>
<style scoped>
html, body {
height: 90%;
width: 96%;
background: #eee;
margin: 10px auto;
}
</style>
Code of: MyForm.vue
<template>
<div class="myForm"></div>
</template>
<script>
export default {
mounted() {
this.setupForm()
},
methods: {
setupForm() {
const formFields = [
{
'tag': 'input',
'type': 'text',
'name': 'firstname',
'cf-questions': 'What is your firstname?'
},
{
'tag': 'input',
'type': 'text',
'name': 'lastname',
'cf-questions': 'What is your lastname?'
}
];
const { ConversationalForm } = require('conversational-form');
this.cf = ConversationalForm.startTheConversation({
options: {
submitCallback: this.submitCallback,
preventAutoFocus: true,
},
tags: formFields
});
this.$el.appendChild(this.cf.el);
},
submitCallback() {
var formDataSerialized = this.cf.getFormData(true);
console.log("Formdata, obj:", formDataSerialized);
this.cf.addRobotChatResponse("You are done. Check the dev console for form data output.")
}
}
}
</script>
<style scoped>
.myForm {
position: relative;
height: 100%;
width: 100%;
}
</style>
I do not get any errors when I run the Nuxt.JS project, but in a browser window, it does not display the same result as the original Vue.JS project.
Why am I getting errors on code convertation process? Thanks!

Try to wrap the .myForm in ~/components/MyForm.vue with an extra div. Here's an example https://codesandbox.io/embed/codesandbox-nuxt-conversational-form-oh9y4
<template>
<div>
<div class="myForm"></div>
</div>
</template>

Vue notification when component DOM changed

A prop change with no effect on the component's DOM triggers its updated function, unexpectedly.
https://jsfiddle.net/e5gyuorL/1/
Same result for v-html="markup()" or {{markup()}} or computed: { markup: ... }.
Docs for updated (https://v2.vuejs.org/v2/api/#updated) say:
Called after a data change causes the virtual DOM to be re-rendered and patched.
How does one catch actual DOM re-renders? If this is a FAQ, apologies; I looked at length.

The most straightforward way I can think of is to have the component store its innerHTML in a data item, and on each update check to see whether it has changed:
Vue.component('t-markdown', {
template: '#t-markdown',
data: {
innerHTML: ''
},
props: {src:String},
methods: {
markup: function() { return this.src.slice(0,11) },
},
updated: function() {
if (this.innerHTML !== this.$el.innerHTML) {
this.$parent.count++;
this.innerHTML = this.$el.innerHTML;
}
},
mounted() {
this.innerHTML = this.$el.innerHTML;
}
});
new Vue({
el: "#app",
data: {count:0, inp:'<b>src</b> '},
methods: {
change: function() { this.inp += '#' },
},
mounted() {
setTimeout(() => this.inp = '<i>changed!</i>', 7000);
}
})
body {
background: #20262E;
padding: 20px;
font-family: sans-serif, Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<t-markdown :src="inp"></t-markdown>
<button #click="change">change</button> updated: {{count}}
<div>
{{inp}}
</div>
</div>
<script type="text/x-template" id="t-markdown">
<div v-html="markup()"></div>
</script>

Vue v-for: iterate one element individually in an array

I'm looking to loop through an array of span tags and add is-active to the next one in line, every 3 seconds. I have it working but after the first one, it adds all the rest. How do I just pull that class from the active one and add it to the next array item?
I've read through the official documentation several times and there doesn't seem to be any mention of iterating individual items, just listing them all or pushing an item onto the list.
I'm not sure if 'index' comes in to play here, and how to grab the index of the span element to add/subtract is-active. what am I doing wrong?
var firstComponent = Vue.component('spans-show', {
template: `
<h1>
<span class="unset">Make</span>
<br>
<span class="unset">Something</span>
<br>
<span v-for="(span, index) of spans" :class="{ 'is-active': span.isActive, 'red': span.isRed, 'first': span.isFirst }" :key="index">{{ index }}: {{ span.name }}</span>
</h1>
`,
data() {
return {
spans: [
{
name: 'Magical.',
isActive: true,
isRed: true,
isFirst: true
},
{
name: 'Inspiring.',
isActive: false,
isRed: true,
isFirst: true
},
{
name: 'Awesome.',
isActive: false,
isRed: true,
isFirst: true
}
]
};
},
methods: {
showMe: function() {
setInterval(() => {
// forEach
this.spans.forEach(el => {
if (el.isActive) {
el.isActive = false;
} else {
el.isActive = true;
}
});
}, 3000);
}
},
created() {
window.addEventListener('load', this.showMe);
},
destroyed() {
window.removeEventListener('load', this.showMe);
}
});
var secondComponent = Vue.component('span-show', {
template: `
<span v-show="isActive"><slot></slot></span>
`,
props: {
name: {
required: true
}
},
data() {
return {
isActive: false
};
}
});
new Vue({
el: "#app",
components: {
"first-component": firstComponent,
"second-component": secondComponent
}
});
.container {
position: relative;
overflow: hidden;
width: 100%;
}
.wrapper {
position: relative;
margin: 0 auto;
width: 100%;
padding: 0 40px;
}
h1 {
font-size: 48px;
line-height: 105%;
color: #4c2c72;
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: archia-semibold, serif;
font-weight: 400;
margin: 0;
height: 230px;
}
span {
position: absolute;
clip: rect(0, 0, 300px, 0);
}
span.unset {
clip: unset;
}
span.red {
color: #e43f6f;
}
span.is-active {
clip: rect(0, 900px, 300px, -300px);
}
<div id="app">
<div class="container">
<div class="wrapper">
<spans-show>
<span-show></span-show>
</spans-show>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

To achieve desired result, I'd suggest to change the approach a bit.
Instead of changing value of isActive for individual items, we can create a variable (e.g. activeSpan, that will be responsible for current active span and increment it over time.
setInterval(() => {
// Increment next active span, or reset if it is the one
if (this.activeSpan === this.spans.length - 1) {
this.activeSpan = 0
} else {
this.activeSpan++
}
}, 3000);
In component's template, we make class is-active conditional and dependent on activeSpan variable:
:class="{ 'is-active': index === activeSpan, 'red': span.isRed, 'first': span.isFirst }"
If you still need to update values inside spans array, it can be done in more simple way, via map for example. Also included such case as optional in solution below.
Working example:
JSFiddle
Sidenote: there is no need to add window listeners for load event, as application itself is loaded after DOM is ready. Instead, method can be invoked inside created hook. It is included in solution above.

Update array items asynchronously - watches not firing

I have created a component that displays blog article previews. This component has pagination and upon selecting a new page I refresh the array of article previews. The list of articles is fetched from a JSON api from server1. The response contains information to fetch each article from server 2. Then I fire x asynchronous fetches to server 2, as many as items in the first response. In those responses I update the items in the array.
I am new to vue but after some struggling I got this to work. Now I'm trying to add a spinner in the article previews while the separate articles are loading. My idea was to watch in the previewcomponent for an article update and show the spinner depending on that. Unfortunately it doesn't work and now I'm starting to doubt my implementation. I notice that the watch in the preview is not called for every previewcomponent but still every preview is updated and shown correctly. I assume this is because of the messaging system but I don't manage to fix it.
My question is twofold:
Is my implementation a correct way of handling this problem? To get this to work I nicely I need to 'erase' the array because otherwise new articles were 'overwriting' old ones and this was visible.
How can I handle the spinners. Why are the watches not triggered and how can I fix this? In the code below I have some console writes. I see 10 times 'async' and each time a different amount of 'watch', never 10.
The complete code is on github here: Home and ArticlePreview. These are the most relevant parts:
Home:
<template>
<div class="container article">
<div class="row" v-for="(article, index) in articles" :key="index">
<ArticlePreview v-bind:blogEntry="article"></ArticlePreview>
</div>
<b-pagination-nav :use-router="true" :link-gen="generateLink" align="center" :number-of-pages="nofPages" v-model="pageIndex" />
</div>
</template>
data: function ()
{
return {
articles: <BlogEntry[]> [],
nofPages: 1
}
},
loadContent()
{
fetch("./api/v1/articles.php?page=" + this.pageIndex)
.then(response => response.json())
.then((data) =>
{
this.nofPages = Math.ceil(data.nofItems/10);
this.articles.splice(0);
this.articles.splice(data.data.length);
let index :number;
for(index = 0; index < data.data.length; index++)
{
createArticleAsync(data.data[index].name, data.data[index].permlink).then(function(this: any, index: number, article: BlogEntry)
{
console.log('async');
Vue.set(this.articles, index, article);
}.bind(this, index));
}
})
},
ArticlePreview:
<template>
<div class="container-fluid">
<div class="row" v-if="blogEntry">
<template v-if="blogEntry">
<div class="imageframe col-md-3">
<div class="blog-image">
<img :src="blogEntry.previewImage" style="border-radius: 5px;">
</div>
</div>
<div class="col-md-9">
<h5 class="font-weight-bold" style="margin-top:5px;"><router-link :to="{ name: 'Article', params: {author: blogEntry.author, permlink: blogEntry.permlink } }">{{blogEntry.title}}</router-link></h5>
<div class="multiline-ellipsis">
<p>{{blogEntry.previewBody}}</p>
</div>
<span class="metadata"><i>by <a :href="AuthorBlogLink">{{blogEntry.author}}</a> on {{blogEntry.created | formatDate}}</i></span>
</div>
</template>
<template v-else>
<p>Loading</p>
</template>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import VueRouter from 'vue-router';
import {formatDate} from "../utils/utils";
export default Vue.extend({
props: [
'blogEntry'
],
data: function ()
{
return {
loading: true
}
},
watch:
{
blogEntry(newValue)
{
console.log('watch');
if(newValue)
this.loading = false;
else
this.loading = true;
}
}
});
</script>

I think the method of getting the detailed data of the article should be encapsulated inside the component, and the loading state is also maintained internally.just like the code below:(It doesn't work properly because Mockjs cannot execute correctly in snippet)
Mock.setup({timeout: 2000})
const URL_ARTICLE_LIST = '/api/v1/articles.php'
const URL_ARTICLE_DETAIL = '/api/v1/article_detail.php'
Mock.mock(/\/api\/v1\/articles\.php.*/,function(options){
return {
nofItems: 33,
data: Mock.mock({
'list|10': [{
'title': '#title',
'url': URL_ARTICLE_DETAIL
}]
}).list
}
})
Mock.mock(URL_ARTICLE_DETAIL,function(options){
return Mock.mock({
content: '#paragraph'
})
})
Vue.component('article-card',{
template: `
<div>
<template v-if="!loading">
<div class="article-title">{{articleTitle}}</div>
<div class="article-content">{{article.content}}</div>
</template>
<template v-else>
<div>loading...</div>
</template>
</div>`,
data () {
return {
loading: false,
article: {}
}
},
props: {
articleTitle: {
required: true,
type: String
},
articleUrl: {
required: true,
type: String
}
},
watch: {
articleUrl (url,oldUrl) {
if(url && url!=oldUrl){
this.loadContent()
}
}
},
methods: {
loadContent () {
this.loading = true;
//or your own async functions
axios.get(this.articleUrl).then(res=>{
this.article = res.data
this.loading = false;
})
}
},
created () {
this.loadContent()
}
});
var app = new Vue({
el: '#app',
data () {
return {
articles: [],
nofPages: 1,
page: 1 //you should get page param from vue-router just like this.$route.query.page
}
},
created () {
//you can also use fetch here
axios.get(URL_ARTICLE_LIST+'?page='+this.page).then(res=>{
console.log(res.data)
this.nofPages = Math.ceil(res.data.nofItems/10);
this.articles = res.data.data
})
}
})
ul,li{
list-style: none;
}
.article_list{
display: flex;
flex-wrap: wrap;
}
.article_list>li{
width: 300px;
background: skyblue;
color: white;
margin: 10px;
}
.article-content{
text-indent: 2em;
}
.pagination-wrapper>li{
display:inline-block;
padding: 5px;
border: 1px solid skyblue;
margin: 3px;
}
.pagination-wrapper>li.active{
background: skyblue;
color: #fff;
}
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<ul class="article_list">
<li v-for="article of articles">
<article-card :article-title="article.title" :article-url="article.url"></article-card>
</li>
</ul>
<ul class="pagination-wrapper">
<li v-for="x in nofPages" :class="{active: page==x}">{{x}}</li>
</ul>
</div>

CSS styles not being applied to HTML within a Vue Component

I am trying to create a rotating text animation using Vue.js and I used this CodePen as inspiration.
I got all the HMTL elements properly in place (i.e., as in the CodePen mentioned). In short:
each word is formed of several <span> elements, each containing one letter.
following a specific time interval, each <span> that holds a letter gets applied an .in and .out CSS class. This goes on indefinitely.
here is what it looks like in the DOM:
the problem is that no matter what CSS selectors I use, I can't target the .in and .out classes, unless I do it via Developer Tools in Chrome:
original output:
output after I added the classes in Developer Tools:
Here is the bare minimum code of my Vue Component:
<template>
<div id="app-loading">
<div class="words">
<span v-for="setting in settings" v-html="setting.lettersHTML" :id="setting.id" class="word"></span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
settings: [
{ word: 'WordOne', id: 1, lettersArray: null, lettersHTML: null },
{ word: 'WordTwo', id: 2, lettersArray: null, lettersHTML: null }
],
currentWord: 1
}
},
created() {
this.splitLetters();
},
mounted() {
setInterval(this.changeWord, 1500);
},
methods: {
splitLetters() {
this.settings.forEach((setting) => {
let letters = [];
for (let i = 0; i < setting.word.length; i++) {
let letter = `<span class="letter">${ setting.word.charAt(i) }</span>`;
letters.push(letter);
}
setting.lettersArray = letters;
setting.lettersHTML = letters.join('');
});
},
changeWord() {
let current = document.getElementById(this.currentWord).getElementsByTagName('span');
let next = (this.currentWord == this.settings.length) ? document.getElementById(1).getElementsByTagName('span') : document.getElementById(this.currentWord + 1).getElementsByTagName('span');
// Animate the letters in the current word.
for (let i = 0; i < current.length; i++) {
this.animateLetterOut(current, i);
}
// Animate the letters in the next word.
for (let i = 0; i < next.length; i++) {
this.animateLetterIn(next, i);
}
this.currentWord = (this.currentWord == this.settings.length) ? 1 : this.currentWord + 1;
},
animateLetterOut(current, index) {
setTimeout(() => {
current[index].className = 'letter out';
}, index * 300);
},
animateLetterIn(next, index) {
setTimeout(() => {
next[index].className = 'letter in';
}, 340 + (index * 300));
}
}
}
</script>
<style lang="scss" scoped>
#app-loading {
font-size: 4rem;
}
.words, .word {
border: 1px solid rosybrown;
}
.letter {
text-decoration: underline; // Not working.
}
.letter.in {
color: red; // Not working.
}
.letter.out {
color: blue; // Not working.
}
</style>
What goes wrong that prevents these classes from being applied?

You're using v-html, but that doesn't work with scoped styles.
DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.

This worked for me:
<template>
<div class="a" v-html="content"></div>
</template>
<script>
export default {
data() {
return {
content: 'this is a <a class="b">Test</a>',
}
},
}
</script>
<style scoped>
.a ::v-deep .b {
color: red;
}
</style>

Yes,
v-html
doesn't work with scoped styles.
As Brock Reece explained in his article Scoped Styles with v-html, it should be solved like this:
<template>
<div class="a" v-html="content"></div>
</template>
<script>
export default {
data() {
return {
content: 'this is a <a class="b">Test</a>',
}
},
}
</script>
<style scoped>
.a >>> .b {
color: red;
}
</style>

Most answers are deprecated now that Vue3 is out.
Up-to-date usage of deep selector:
.letter{
&:deep(.in) {
color:blue;
}
&:deep(.out) {
color:red;
}
}

Vue3: In Single-File Components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue's template compiler.
You can use :deep() inner-selector in Vue3 project.
Here is a example：
<script setup lang="ts">
import {onMounted,ref } from 'vue'
const content = ref("")
onMounted(()=>{
window.addEventListener('keydown',event =>{
content.value = `
<div class="key">
<span class="content">${event.keyCode}</span>
<small>event.keyCode</small>
</div>
`
})
})
</script>
<template>
<div class="container" v-html="content">
</div>
</template>
<style lang="scss" scoped>
.container{
display: flex;
:deep(.key){
font-weight: bold;
.content{
font-size: 1.5rem;
}
small{
font-size: 14px;
}
}
}
</style>