configure unique separators in Vue 3

I've been attempting to customize the delimiters in Vue.js 3, but unfortunately, it's not taking effect as expected.

Initially, I tried setting the component parameter delimiters like this:

export default defineComponent({
    delimiters: ["${", "}$"],
    // ...
})

However, no changes were observed.

Next, I attempted to modify the main.ts file in this manner:

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

App.delimiters = ["${", "}$"];

createApp(App)
   .use(router)
   .mount("#app");

Yet, the template string interpolation remains unaffected.

Any insights on what might be causing this issue?

Answer №1

It is required to be placed within the createApp

Here's an example:

var app = Vue.createApp({
  data() {return {message: 'Hello'}},
  // for global
  delimiters: ["${", "}$"],
  // for standalone
  compilerOptions: {
    delimiters: ["${", "}$"]
  }
}).mount('#app');
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9c9f8faad9c4dac4db">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="app"><h1>Content: ${message}$</h1></div>

Answer №2

When you check the console in your browser's developer tools, you might come across a message like this:

""" vue.runtime.esm-browser.js:1486 [Vue warn]: Component provided template option but runtime compilation is not supported in this version of Vue. Use "vue.esm-browser.js" instead. at """

import { createApp } from "vue";

The issue arises because 'vue/dist/vue.runtime.esm-browser' does not support the delimiters option as it requires compilation not offered in this build.

To fix this, simply replace the import line with

import { createApp } from "vue/dist/vue.esm-browser";

or

import { createApp } from "vue/dist/vue.esm-bundler";

That should resolve the problem smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an issue while attempting to authenticate CMS signature using pkijs

I am attempting to validate a CMS signature generated with open ssl using the following command: $ openssl cms -sign -signer domain.pem -inkey domain.key -binary -in README.md -outform der -out signature Below is my code utilizing pkijs: import * as pkij ...

Enhancing Vue 3 Tables with Dynamic Slots

I have a unique and specific inquiry regarding Vue3, slots, and the components I've developed for a reusable table setup. CustomTable.vue <template> <table> <thead> <slot renderAs="header"></slot> ...

Different Ways to Remove an Element from an Array in TypeScript

I have been browsing through the responses here, but none of them seem to work for me. I am trying to remove an item from an array, but no matter what I do, the index keeps returning as -1. deleteItinerary(id: string) { this.dataSvc.removeItinerar ...

Converting Laravel's @foreach loop into a vue v-for loop while maintaining database relationships

Working on my Laravel SPA, I recently gained knowledge about using Vue and understanding how v-for functions within my components. However, I am currently facing a challenge in implementing it due to my lack of experience in looping through related tables. ...

Issue with Readonly modifier not functioning as expected in Angular/Typescript

My goal is to create a component property that is read-only. However, I am facing an issue where the readonly modifier does not seem to have any effect. View example on stackblitz According to the documentation, once I initialize the cars property in the ...

Unexpected behavior with HashLocationStrategy

I am currently tackling a project in Angular2 using TypeScript, and I seem to be having trouble with the HashLocationStrategy. Despite following the instructions on how to override the LocationStrategy as laid out here, I can't seem to get it to work ...

Struggling with the transformation: Failed to find import "child_process" in TypeScript

I encountered an issue when trying to run my simple TypeScript project. I am receiving the following error: 'Error while transforming Could not resolve import "child_process".' You can see the error in this screenshot. This error occurs in my tsc ...

Exploring the concepts of type intersection in TypeScript

I attempted to create a type definition for recurrent intersection, in order to achieve this specific behavior: type merged = Merged<[{a: string}, {b: string}, ...]> to end up with {a: string} & {b: string} & ... I came up with some type u ...

Issue with Reactive Form - The call signatures of 'FormGroup' are not compatible

I have a function written in TypeScript: // Form summaryAreaForm = new FormGroup ({ summary: new FormControl(null) }) // Function update() { document.getElementById('textDiv').innerHTML = this.summaryAreaForm('summary').value ...

TS2307 Error: The specified module (external, private module) could not be located

I have come across similar queries, such as tsc throws `TS2307: Cannot find module` for a local file . In my case, I am dealing with a private external module hosted on a local git server and successfully including it in my application. PhpStorm is able ...

Tips on how to modify a select option in vue based on the value selected in another select

My Web Api has methods that load the first select and then dynamically load the options for the second select, with a parameter passed from the first selection. The URL structure for the second select is as follows: http://localhost:58209/api/Tecnico/Tanq ...

Using Vue for Firestore pagination

Utilizing the bootstrap-vue pagination component: <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" ></b-pagination> Component.vue: export default class PaginatedLinks extends Vue { public currentPage: number ...

Error: The Angular test bed is unable to locate the mixpanel definition

Is there a way to test the functionality of the form without considering Mixpanel? I am encountering an error as follows. login.component.ts ngOnInit() { Mixpanel.trackEvent("View Screen", { "Screen Name": "Login" }); this.createForm(); } cr ...

What are the steps to replicate a node that includes an Angular selector using TypeScript?

My Angular app has a peculiar issue. In one component, my HTML includes a selector of another component within a div like this: <div id="header"> <selector> Text Content </selector> </div> When I try to clone this d ...

VueJS is unable to access an array

Unable to access an array in Vue.js. console.log(this.ref_number_response[0]); When I try to access the array, it shows undefined. I'm puzzled by this... data(){ return{ ref_number_response: [], } }, methods:{ che ...

Issue with VueJS: relative resources fail to load when situated behind a reverse proxy

Welcome Message As the overseer of various containers (docker) concealed behind a reverse proxy (traefik 2.0), from backend applications (nodejs) to frontend applications (vuejs), my current endeavor involves serving a VueJS application behind a specific ...

What could be the reason for the absence of a TypeScript error in this situation?

Why is it that the code below (inside an arbitrary Class) does not show a TypeScript error in VSCode as expected? protected someMethod (someArg?: boolean) { this.doSomething(someArg) } protected doSomething (mustBePassedBoolean: boolean) { /* ... * ...

Encountering the issue of receiving an error message that says "emitted value instead of an instance of error while compiling template" when trying to set

Trying to set up a Vue table with the help of a Vue table plugin in my application through node module is proving to be challenging. An error keeps popping up when I try to use all Vue table components. I installed all Vue table plugins using npm and impor ...

Creating an upload file input form within a VueJS Application

One of the challenges I'm facing involves creating a VueJS component with an input field for file type. Below is the code for my component: <template> <div class="flex-col justify-start w-full"> <div class="mt-2 block upper ...

Could you please clarify the type of event on the onInputChange props?

I am encountering an issue with using React.ChangeEvent on the mui v4 autocomplete component as I prefer not to use any other method. However, I keep getting an error indicating that the current event is incompatible. const handle = (e: React.ChangeEv ...