Switching Vue.js from the standalone build to the runtime-only build midway through a project?

Opted for the runtime-only version of Vue.js for a new project. I came across in the documentation that to switch to the standalone version, one must include an alias in webpack like this:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.js'
  }
}

Currently, there is no need for the compiler in my application. However, there might come a time when I need to transition to the standalone build.

My inquiry is: Will transitioning between runtime-only and standalone be seamless or will it require extensive refactoring?

If significant refactoring is necessary, I may consider starting with standalone from the beginning to avoid complications later on.

javascriptvue.jsvuejs2

Answer №1

standalone provides support for the template option in components, allowing you to define custom templates easily like this:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

standalone also offers the ability to load vue.js from a CDN, similar to how you would include other JavaScript libraries such as jQuery.

runtime-only does not permit the use of template in component definitions. Instead, you must create a separate my-component.vue file and define the template within it following the instructions in the Single File Components guide: http://vuejs.org/guide/single-file-components.html

If you choose to use runtime-only, you will need to utilize vue-cli for development purposes.

To transition from standalone to runtime-only, all components must be rewritten into my-component.vue files and you need to start using vue-cli.

Conversely, switching from runtime-only to standalone does not require any changes.

In conclusion, transitioning between runtime-only and standalone is relatively seamless.

Personally, I prefer the runtime-only mode due to its smaller build sizes and potentially better performance, thanks to pre-compiled templates. Additionally, organizing components in separate vue files helps structure the app more effectively.

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

The Wikipedia API is unable to be loaded using the XMLHttpRequest

I have encountered this error before on this platform, and although I managed to fix it, I am seeking a more in-depth explanation of the solution. For a project where I am learning, I decided to create a Wikipedia Viewer application. The first step was to ...

javascriptjsonajaxapi

When attempting to run `npm install`, an error message is received indicating a network connectivity issue: "npm ERR

When I try to run npm install, I encounter an error. Here is the error message: 71 error code ETIMEDOUT 72 error errno ETIMEDOUT 73 error network request to https://registry.npmjs.org/@angular%2fanimations failed, reason: connect ETIMEDOUT 151.101.112.16 ...

javascriptangularjsnode.js

Is it possible to transform all values in arrays to 0s in JavaScript/p5.js during the copying process?

I’m struggling with a simple code where I want to store an array of arrays containing FFT audio data. It seems like there might be a JavaScript issue because when I try to push the array into another array called spectrums, all the values inside spectr ...

javascriptarraysprocessingfftp5.js

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

javascriptcssangularjsmaterial-designangular-material

Ways to combine extensive value within an array containing various objects

I am working with an array of objects and I need to merge all the values of params within each object into a single object. Array [ Object { "key": "This week", "params": Object { "thisWeekfilterDistance": [Function anonymous], "this ...

javascriptreact-native

Utilize the split functionality only when the character you want to split by is found in

Consider the following situation: I have 6 string variables that contain special characters. I stored these 6 strings in an array like this: arr=[str1,str2,str3...); arr=escape(arr); due to the presence of special characters in some string variables. ...

javascriptjquery

Is it possible to host multiple React applications on a single port? Currently experiencing issues with running both an Admin panel and the Front side in production mode on the same Node.js API server

Is it possible to host multiple React applications on the same port? I am experiencing issues with running both an Admin panel and a Front side React app in production mode on the same Node.js API server. ...

javascriptnode.jsreactjsmongodbreact-redux

What is the most efficient way to load data just once when a user reaches the bottom of the page?

I am encountering an issue with a webpage that dynamically loads HTML from a PHP script which scraps image links from another site when the user scrolls to the bottom of the page. The problem is that the scraping script takes some time to complete, causing ...

javascriptajaxscrolljquery

Is there a way to transform integers into their matching strings within Vue markup?

I have a database table where I retrieve data. The "status" field is used to manage the information in this table. If the status is equal to 1, it indicates "Active." If the status is equal to 2, it signifies "Completed." If the status is equal to 0, it r ...

javascriptjsonlaravelvue.js

The Vue ChartJS fails to display properly after the page is refreshed

Although this issue may appear to be a common one, some of the suggested solutions are outdated or no longer functional. My objective is to ensure that the chart remains responsive even after the page reloads. I attempted to implement the solution provided ...

javascriptvue.js

Looking for a demonstration using dust.js or handlebars.js in a two-page format with express3.x and node?

Currently, I am in the process of selecting a templating engine to use. While I have come across numerous single-page examples utilizing template engines, I am specifically searching for a practical example that demonstrates handling two distinct pages whi ...

javascriptnode.jsexpresshandlebars.jsdust.js

What role does Vue.use() play when incorporating a plugin? If Vue.use() has already been implemented, is it necessary to also include it in the components?

I have been utilizing the vue-flag-icon plugin for displaying flags, found at https://www.npmjs.com/package/vue-flag-icon. In their documentation, I came across the following steps for initialization. import FlagIcon from 'vue-flag-icon' Vue.use( ...

vue.js

Controller in EmberJS is unable to access model data passed from route

Could someone lend me a hand with this concern? I currently have EmberJS 3.4 version and in my route, the code looks like: export default Route.extend({ model(){ const items = [{price: 10}, {price: 15}] return items }, }); Howeve ...

javascriptnpmember.jsember-data

Looking for a way to choose a button with a specific class name and a distinct "name" attribute using jquery?

I am currently working on developing a comment system. As part of this system, I want to include a toggle replies button when a user posts a reply to a comment. However, I only want this button to be displayed if there are no existing replies to the commen ...

javascriptjquery

in vuejs, a legendary row is added to the table every 25 or 50 records

VueJS v-for is functioning properly: <tr v-for="request in requests"> <td>{{request.name}}</td> <td> .. etc .. </td> </tr> Now, I want to insert a legend row after every 25 or 50 records. Here's what I tri ...

htmlvue.jsv-for

Verify whether the chosen options from a dropdown list coincide with a predetermined value

I am working with a form that generates dropdown lists dynamically. <c:forEach var="companyList" items="${company.detailList}" varStatus="status"> <tr> <td>c:out value="${companyList.employeeName}" /></td> <td> <select ...

javascriptjqueryhtmltwitter-bootstrap

Synchronize custom directive controller data with data from a factory

As a newcomer to angularjs, I stumbled upon this example that I found somewhere and it works perfectly well. However, I am puzzled by how the data within the customized directive controller remains synchronized with the factory data. Here is the snippet of ...

javascriptangularjs

Is the textarea's shape out of the ordinary?

Most textareas are typically rectangular or square in shape, similar to this: However, I am interested in having a custom-shaped textarea, like the example below: Is it feasible to achieve? ...

javascriptjqueryhtmlcss

Utilize the Power of React.js and Express.js to Send Emails

After building a web app using React.js in ES6, I found myself wanting to add a "Contact Us" page that allows users to send an email. However, as a newcomer to React, I discovered that React itself cannot directly send emails. Following tutorials with node ...

javascriptnode.jsemailexpressreactjs

Enabling Cross-Origin Resource Sharing (CORS) for localhost port 3000 on Laravel

Before seeking help here, I made sure to explore online for potential solutions to my dilemma. My setup involves using Nuxt SSR on the front-end and Laravel 7 as the backend API, which now comes with native CORS support. The front-end app is hosted at htt ...

phplaravelvue.jsnuxt.jslaravel-7