Prism not working inside Vue component

Issue I need source code highlighting. I am using Prism. I tried to paste this code in root of app and it was highlighted successfully: <div id=”app”> <div class=”MainContainer”> <div class=”Header”> <a href=”#”>past-code</a> </div> <component v-bind:is=”currentView”></component> <code class=”language-dart”>void main() {

Continue reading

VueJS with HAML/Jade/Pug-like templating

Issue I’m using both Vue.js and HAML in my current project. The templates are parsed by HAML, converted into HTML, then parsed by Vue. For instance: #pagecontent.nonscrolling %h2 Demand forecasts %label{ for:”location-type” } Select location type %select.form-control#location-type{ v-model:”locationType” } %option{

Continue reading

Vue async component SSR rehydration

Issue Using Vue async components with SSR is causing rehydration on page refresh. Is there a way not to cause components update without reason? Markup from SSR and on client is the same. https://v2.vuejs.org/v2/guide/components-dynamic-async.html Solution When using dynamically loaded components

Continue reading

How to filter an array of object in Vuejs typescript

Issue in this project. I’m using Vuejs Typescript and the data type is like: ["order": { "id":1, "created_at":"2019-12-06T10:22:17Z", "status":"open", "updated_at":"2020-07-27T04:21:06Z", "recipient":null, "custom_fields":[ {"id":2,"value":’ABC’}, {"id":3,"value":’EFG}, {"id":4,"value":’CSA’} ] } ] This is how I get the data: private mapUnprinted (data: any) :

Continue reading

Maximum recursive updates exceeded in component

Issue I am trying to build this pretty simple fetching function: const fetchUnstakedNFTs = async (): Promise<void> => { if (wallet.value && wallet.value.connected && publicKey.value) { const tokenAccountsFromWallet = await connection.getParsedTokenAccountsByOwner(publicKey.value, { programId: new PublicKey( "TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA" ), }); // Define

Continue reading

scrollTop using computed in vue.js

Issue Here is part of my code <template> <button v-show="visible" @click="backToTop">👆</button> </template> <script lang="ts"> export default { computed: { visible() { return document.documentElement.scrollTop != 0 } } } </script> The button doesn’t disappear when i scroll the page to the

Continue reading

Vue assets image url auto changed

Issue I will get an image that I use in Vue project as url from another project. No problem on vue side when I call it like this : <v-img class="header__logo" lazy-src="@/assets/images/mail.jpg" src="@/assets/images/mail.jpg" alt="Logo" ></v-img> When I look at the

Continue reading

can't receive file with multer (node.js-nuxt3)

Issue I use nuxt3/node.js with multer , i can’t store or receive file in my server and i can’t see req.file in root, its empty all time. server Code: const upload = multer({ dest: ‘./uploads/’ }) router.post(‘/sendNewQuestionCSV’, upload.single(‘csv’),adminControler.sendNewQuestionCSV.bind(adminControler)) and my

Continue reading

Event fired multiple times with window.addEventListener in Vue

Issue I have this html code inside my Vue component <div id="stats" class="" @click="clickOutside()"> <ArticleStats :article="article" class="tw-mt-5 tw-hidden md:tw-flex" /> <div @click="$router.push(‘/article/’ + article.content_content_id)" class=" tw-mt-5 tw-block tw-text-center tw-text-sm md:tw-text-base tw-cursor-pointer tw-text-white tw-p-2 tw-rounded-2xl tw-w-full tw-bg-red-400 hover:tw-bg-red-600 hover:tw-text-white " >

Continue reading

webpack-dev-server hot reload not working

Issue My file structure is: dist css style.css index.html js bundle.js src css style.css index.html js main.js node_modules webpack.config.js package.json My webpack.config.js looks like: module.exports = { entry: ‘./src/js/main.js’, output: { path: __dirname, filename: ‘./dist/js/bundle.js’ }, module: { loaders: [

Continue reading

Passing Vue data into Ejs include()

Issue Look please <div v-for="food in foods"> <%- include(‘../partials/navbar’, {food:food}); %> </div> Here I’m trying to pass food from foods array using Vue into Ejs include() function. Does anybody know how to make it work? Solution Use component instead: <navbar

Continue reading