What are the steps to use the vue-text-highlight feature?

I am attempting to implement an example from the basic usage section of https://github.com/AlbertLucianto/vue-text-highlight. However, upon opening index.html in Firefox, I am only greeted with a blank page.

You can find the code I am using at https://github.com/michaelhochleitner/vue-text-highlight-basic-usage.

The syntax snippet that I have included in my implementation is as follows:

<script>
module.exports = {
    data: function () {
        return {
            queries: ['birds', 'scatt'],
            description: 'Tropical birds scattered as Drake veered the Jeep'
        };
    }
}
</script>

This syntax was taken from https://v2.vuejs.org/v2/guide/single-file-components.html.

Could someone provide insight into why index.html is failing to display any content?

Answer №1

Using import statements in .js files is not the correct approach. This syntax is reserved for converting packages in your bundle to be used by your project. I suggest starting with the vue-cli to work on a complete Vue project and properly import and use packages as needed.

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

PHP MySQL - Automatically trigger email notification upon insertion of a new record

Is there a way to trigger an email alert only when a new record is added, not when the user edits input fields in a table? The database I'm working with stores equipment delivery dates. Users schedule deliveries and input the dates into a SQL Server ...

Is there a way to convert a json array to a javascript array in AngularJs?

I am new to Angular and front-end development and facing a challenge that I can't seem to overcome. After reassigning one variable to another: $scope.testarray = $scope.todos; only the 'todos' data is being displayed when using Angular bind ...

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result. Here is my HTML code: <section class="favorites"> <div class="category" ...

Tips and tricks for personalizing an npm package in vue.js

I've been working on customizing a multiselect package to incorporate tab events in vuejs, but so far I haven't seen any changes reflected. I'm looking for guidance on how to modify a library within Vue. My approach was to navigate to the n ...

How can Vue-toastr and Vue2 be configured with global options for toastr notifications?

I'm currently utilizing vue-toastr in my project, which combines Laravel 5.5 and Vuejs 2. Although the toasts are displaying correctly, I am struggling to set global options for them, such as position... I have attempted to do this but have been uns ...

Is there a way to automatically input an array of elements into a form without having to do it manually

Is it possible to create a form using an array of items fetched from a database, and automatically populate the form with each of these elements? Currently, I'm facing difficulties as the form appears empty. What am I missing? Below is the code I ha ...

Is there a way to set a custom width or make the description responsive?

Is there a way to ensure that the description is responsive and automatically goes to the next line instead of extending horizontally? Although using textField could fix this issue, I also need to adjust the padding and outline. Are there any alternative s ...

Explication of syntax not functioning

Following the instructions provided here but encountering issues, any assistance? <script type="text/javascript" src="sh/src/shCore.js"></script> <script type="text/javascript" src="sh/scripts/shBrushJScript.js"></script> <lin ...

Please indicate the generator title (for example, nx generate @nrwl/workspace:library) specifically for Angular

Currently, I am expanding my knowledge in web development. While working with Angular, I encountered an issue when trying to create a new component. The error message reads "Specify the generator name (e.g., nx generate @nrwl/workspace:library)" after exec ...

What steps can I take to persistently subscribe to SignalR from an Angular service even in the event of connection failures?

Is there a way to safely attempt to connect to SignalR with intervals between attempts until the connection is established? Also, does anyone have advice on how to handle the different stages of connectivity to the web sockets effectively? We are utilizin ...

What sets v-app-bar apart from v-toolbar in Vuetify?

Recently, I delved into the world of vuetify and discovered that all vuetify components are enclosed within <v-app>. In order to create a menu for my website, I came across the <v-app-bar> and <v-toolbar> elements in the documentation. ...

At what point is the ajax call considered fully executed?

Whenever a client makes an AJAX call, they upload data to the server (HTTP request) and then receive data from the server (HTTP Response). Once the clients have received all the data, the AJAX request is considered successful, and the success callback func ...

How can we transfer a jQuery value from an input field without using a single

This task may seem challenging. How can single quotes be eliminated from a variable when passed directly to another variable? I am using jQuery variable $("#test").val() to extract the value from an input below <input type="text" ...

Looking to Move the Image Up?

I've been experimenting with creating a grid layout where the bottom image will move up until it is 10px away from the image directly above it. However, no matter what I attempt, the spacing seems to be based on the tallest image rather than the one a ...

Are the keys in Postgresql JSON displayed with underscores separating the letters?

I'm currently developing a web application that communicates with a Rails API on top of a Postgres database. As part of my data storage strategy, I am utilizing the jsonb datatype in Postgres to store certain data in JSON format. To adhere to a consis ...

Could anyone help me locate the section in the MUI documentation that explains the correct syntax for the commented code lines I am working on?

Before proceeding, please note that the ThemeProvider with theme={theme} has already been provided. Now, I will share two distinct sets of code files. These files contain sections commented out because they are not functioning as intended when implementing ...

Guide to organizing an HTML table column with a header click using PHP and MySQL

I am currently working on a table that displays data from a MySQL database. I would like to implement functionality that allows users to click on certain columns to sort them in ascending or descending order. However, I am unsure of whether to use PHP, H ...

Utilizing Parent Scope Variables in AngularJS Directives with Isolated Scopes

I'm feeling a bit lost here (edit: after clarification, my question is "Why isn't the directive recognizing the attributes passed to it?"), even though I thought I had a good grasp on it. I'm having trouble accessing the properties of the pa ...

The react-router-dom seems to be malfunctioning, so let's simply render the "/"

Struggling to render multiple pages in React, I am a newbie and have been exploring various tutorials and pages. My stack includes React, Webpack, Babel, and ESLint with Airbnb configuration. When I render my React app, it appears like this. View of the ...

Determine the hexadecimal color value by combining two different colors along with a specified percentage/position

Can a color in the middle of a gradient be calculated? var initialColor = 'FF0000'; var finalColor = '00FF00'; // At 50% between the two colors, it would result in '808000' var middleColor = determineMiddleColor(initialColor ...