Are you able to create autonomous VueJS components using webpack?

After successfully creating a single-page application using vuejs-templates/webpack, I am now working on developing a static website. Since most of the content is static, there is no need for it to function as an SPA. The basic HTML/CSS layout has already been completed.

However, I do plan on incorporating pages with forms and dynamic content, and I would like to use vue components within these pages.

I am considering different approaches and would appreciate some advice on which method would be best, or if there are better alternatives:

  1. Multiple entries in webpack: While I am unsure of how to execute this, I believe I can create a webpack project from scratch and render multiple entries that I can include in specific pages.

  2. Use browserify: Although not my initial preference, this seems like a viable option. I could utilize vueify to render *.vue components.

  3. Use Nuxt: I have never used Nuxt before, but it appears to be a promising choice. I could potentially create a "SPA" with server-side rendering (SSR).

If you have any other suggestions or ideas, I would love to hear them.

Thank you!

Answer №1

Consider simply referencing Vue as a script file without ruling it out completely. By avoiding bundling and compilation steps, you may sacrifice single file components, but you can achieve similar functionality by utilizing JavaScript template literals. If your requirements are straightforward and you prefer not to affect the overall site structure, this approach could serve as an effective solution.

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 transition kicks in as soon as the page finishes loading

I am attempting to incorporate transitions on divs when the page loads, but I am encountering difficulties getting it to work. template <header> <transition name="slideLeft"> <div v-show="loaded" class="contents content-left"&g ...

Leveraging $scope variables to dynamically generate new scope values within an Angular controller

I am currently faced with the challenge of using latitude and longitude data provided by the server, which is stored in $scope.Address. I am attempting to create a map object with these values as shown below. However, my current implementation is not fun ...

determine if the req.params parameter is void on an express route

Hi everyone, I'm a beginner with node and express and could really use some guidance. I am currently attempting to create a get request that checks if the req.params.address_line is empty, and then performs an action based on that condition. However, ...

What is the method for attaching multiple listeners to an element?

For example: v-on:click="count,handle" I posted this question in the Vue gitter channel, but received advice to use a single listener that triggers others. If using one listener is the recommended approach, I am curious to understand why. Is having multi ...

Determine whether one class is a parent class of another class

I'm working with an array of classes (not objects) and I need to add new classes to the array only if a subclass is not already present. However, the current code is unable to achieve this since these are not initialized objects. import {A} from &apo ...

Mirror the image horizontally prior to saving

I'm working on a camera web app that has filters similar to Snapchat. I'm currently facing an issue where the image is mirrored because I'm using the front camera. Is there a way to flip the image before downloading it? Thank you for your re ...

Sending an Ajax request to a nearby address

I'm feeling a bit lost on how to achieve this task. I've been searching online, but it seems like my search terms may not have been quite right. My goal is to set up a RESTful api. $.ajax({ type: "POST", url: "https//my.url/", data: ...

Shared Vue configuration settings carrying over to Jest spec files

For my unit testing of components using VueJS and Jest, I'm incorporating the Bootstrap Vue library for styling. To address console warnings regarding unknown plugins, I've set up a configuration file: import { createLocalVue } from '@vue/t ...

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

Enumerating the Elements in a List, Including them in 2 Entities inside a List

var arr = ['cat','cat','dog','penguin','chicken','chicken'] function orgAnimals(input) var obj = {}; for (var i = 0 ; i < input.length; i++) { obj[input[i]] = obj[input[i]] || 0; ...

What is the method to specify a .map list within a React component that contains no elements?

I am facing an issue with updating two lists dynamically. When clicked, the item in the array should move to either the 'archived' list or the 'favourite' list. I have mapped each list which is stored in a parent component's state, ...

Encountering an error while transmitting variables through ajax

Encountering an issue when attempting to remove a user from the database. Below is the code I have written: On the server side: @RestController public class EmployeeRestController { @DeleteMapping( value = "/delete_user") public List<Em ...

Using the value of an object as a parameter for another object in Javascript

Assuming I have the following variables: var key = "Section"; course.key = "101"; After running this code, I encounter an error stating that course.key is unidentified. My intention is to set course.Section = "101". Is there a way to pass the value of ke ...

The JavaScript function I coded is capable of executing on its own without needing

The code snippet above defines a function called tablePush that is supposed to push an id to a table when an item is clicked. However, there seems to be an issue as the function executes without a click event. Below is the provided code block: function t ...

Guidelines for preserving regular expression matches in an array with JavaScript

If I have a regex with multiple matches like: var matches = string.match(/\s*(regex1)?\s*(regex2)?(regex3)?\s*/i); and if the string I'm testing looks like this: var string = "regex1 regex3"; Is there a way to capture these values i ...

Modify the CSS of CKEditor using JavaScript after the instance has been initialized

When creating a CKEditor instance, the following steps are typically taken: require_once 'ckeditor/ckeditor.php'; $CK = new CKeditor(); $CK->basePath = './ckeditor/'; $config = array(); echo '<textarea name="content" id="con ...

Zero's JSON Journey

When I make an HTTP request to a JSON server and store the value in a variable, using console.log() displays all the information from the JSON. However, when I try to use interpolation to display this information in the template, it throws the following er ...

Building a new Vue.JS component inside of an existing parent component

Trying to create a nested component in VueJS has been a bit challenging for me. I have attempted something like this, but unfortunately, it doesn't seem to work as expected (the child component does not display anything): I am interested in exploring ...

What are the best ways to resolve the warning from webpack in Express?

I have set up webpack to bundle both the server and client side code... Below is my webpack configuration: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin&a ...

Utilizing Rollup to Bundle a Collection of React Components

I am diving into the world of bundling as I update a compact React component library internally powered by Rollup. Current Status Currently, all components are bundled into a single index.js file. When I import one or more... import { Button, Input } fr ...