Is it possible to create a Nuxt.js static website that incorporates a dynamic single-page application built with Vue.js

Currently researching Static Site Generators for a client project, I discovered Vue.js and Nuxt.js, which appear promising. Given the choice between Vue.js and React, I lean towards Vue at the moment.

The client's website consists of 120 pages with static content that rarely changes. This makes it an ideal candidate for a static site, especially after the client's WordPress site was penalized by Google for slow page loading times...

The "challenge" or question arises because, in addition to these 120 static pages, there is a need for one dynamic page that interacts with a backend through an API. It would be great if I could use Vue.js to code this dynamic page as well.

While I found plenty of information on Nuxt.js for static or server-generated pages, my scenario involves multiple static pages and one dynamic page that communicates with an API using Vue.js (including the site's header, menu, footer, etc.)

Is this feasible, and has anyone tackled a similar project before? Any guidance would be greatly appreciated!

javascriptvue.jsnuxt.jsstatic-site

Answer №1

Achieving this is absolutely possible. To make it happen, I suggest utilizing platforms like strapi.io or contentful to build your pages with content for each component.

Each section of your website can be created as a component within nuxtjs and the content management system itself, as exemplified below.

In the pages section, you can create "_.vue" files that will automatically retrieve content based on the assigned "slug". This is how you can populate your page with relevant content.

For another illustration, check out this link -

I hope the explanations provided above offer you a clearer understanding of the process.

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

I'm curious if there is a method to incorporate localStorage into the initialState of Redux Toolkit within Next.js 14

Attempting to establish the initial value of a Redux Toolkit slice for dark mode using localStorage is proving problematic in Next.js, as the window object is not defined on the server-side, resulting in errors. The typical workaround involves using if (t ...

javascriptreactjsnext.jsreduxredux-toolkit

Mapping Service by Google - Navigate from your current location to desired destination

I have a script that currently displays a route for either car or transit depending on the user's selection. I am looking to adapt this script to set the origin as the user's current location and route from there to a set latitudes and longitudes ...

javascriptgoogle-mapsgoogle-maps-api-3

The CSS is not displaying correctly on Safari and Chrome browsers in Mac OS

I'm having trouble with CSS not loading properly on Apple devices for a website I made. Despite maintaining all media query statements and style sheets separately, the display is not correct in MAC OS safari and chrome. However, everything looks fine ...

javascriptjqueryhtmlcsssafari

Ways to ensure that the dropdown content remains visible even after the mouse has exited the trigger element

There are three buttons arranged in a row, and when one is hovered over, dropdown content appears underneath all three buttons. However, the content disappears when the mouse moves down to it. Unfortunately, images cannot be posted inside yet** https://i.s ...

javascriptjquerycss

The jQuery function appears to be running multiple times in a loop

For some reason, every value in my JSON object is getting added to the "listOfCountries" array twice. It seems like there might be a loop going through the result object more than once. I could really use some assistance with this issue! var listOfCountri ...

javascriptjqueryjsonloops

Error in sending data to the server via the specified URL: "Http failure response for http://localhost/post.php: 0 Unknown Error" and POST request to http://localhost/post.php failed with error code

Feeling a bit stuck trying to add data to my database. As a junior with PHP and Angular, I am using PHP via XAMPP and Angular 8. Is it possible to create separate files for the post and get methods in the PHP file? app.component.ts import { Component, O ...

javascriptphpmysqlangulartypescript

Tips for arranging elements in proper order following a rotation

Having trouble aligning rotated divs? Let's say we rotate .straight by 30deg, and now we want to find the new offset coordinates of its bottom right corner. This way, we can perfectly match up the bottom left corners of .curve with this new coordinate ...

javascriptjquerycssmathrotation

Access the keys of a Flow object type within your codebase

Is it feasible to extract keys from a Flow object type definition within the application code (in other words, are Flow type definitions reflected in any way in the runtime code)? Scenario: type Props = { userID: string, size: number | PhotoSize, s ...

javascriptreactjswebpackflowtype

Unable to remove data once it exceeds 10 entries while using AJAX, jQuery, and JavaScript/PHP

I am having an issue where I can insert data into the first 10 rows and delete any of them successfully. However, when I try to insert data starting from the 11th row, I am unable to delete any rows past the 10th. UPDATE: The deletion function does not wo ...

javascriptphphtmljqueryajax

Values in the list of onClick events are currently not defined

I'm having trouble importing a list component into my form and capturing the onClick event to submit the information. However, every time I click on the list, the data shows up as undefined. What could I be doing incorrectly? Here is the code for my ...

javascriptreactjsmaterial-ui

Leverage the Redux store as the source of data for sending a POST request

For my React project, I designed an input interface and saved the data in a Redux state. Afterward, I set up a new action for making an API call to post the data. When using a constant value as the "data" parameter, everything functions properly. However ...

javascriptreactjsreduxaxios

Injecting live data into an input field within a table using Angular 4

Trying to create a dynamic row table with input fields in all cells. The loaded data is static, and I'm facing issues adding more data in the view. However, the functionality to add and delete rows is working fine. I have experimented with ngModel and ...

javascriptarraysjsonangulartypescript

In React.js, the switch case statement consistently defaults to the default case

Currently, I am working on utilizing <select> tags to update information across components using useContext(). However, I am encountering an issue where the default case is consistently being returned despite the fact that the logged values match the ...

javascriptswitch-statement

Exploring the Integration of Material UI DatePicker with Firestore in ReactJS: Converting Firestore Timestamps to Date Format

The database is correctly recording the date, however, when displayed, the DatePicker does not recognize the date from the database as it is in timestamp format (seconds and nanoseconds). <DatePicker margin="normal" label="Data do pedido" ...

javascriptreactjsfirebasematerial-ui

What steps can I take to ensure my Vue website is tested on various devices and views before it goes live online?

My current project involves developing a website that utilizes Vue-js for the front-end, and Node + MySQL for the back-end. During development mode, when I connect to the internet and run npm run serve, I come across these lines in my command-line: https: ...

mysqlnode.jsvue.jsexpress

Leveraging deferred for linking loops involving several ajax requests

Despite the fact that several questions have been answered on this topic, none of them seem to be effective in this particular scenario. function login(u,p) { console.log(1); return $.post(url, {u,p}); } function out() { console.log(3); //a f ...

javascriptjqueryajaxjquery-deferred

Execute the ajax function using Facebook API

I am currently working on a code to fetch data from Facebook to my localhost, but I have encountered some challenges along the way. Here are the issues that I am facing and I would appreciate any assistance: (1) Initially, I am retrieving data from a spec ...

javascriptphpjqueryajaxfacebook

Retrieving data with model.fetch in Backbone.js when the server response is null

In my app, we utilize model.fetch() to retrieve JSON from the server. The render function is triggered when the model undergoes a change and looks like this: if(_.isUndefined(this.model.get("id_number"))){ this.template = initialTemplate; } else if(th ...

javascriptjsonbackbone.js

Transferring data between two HTML files through the POST method

Is there a way to pass two values (parameters) from one HTML page to another without displaying them in the URL, similar to using the POST method? How can I retrieve these values on the second HTML page using JavaScript, AJAX, or jQuery? For example: cli ...

javascriptjqueryhtmlajax

Navigating JSONP using jQuery

I'm encountering an issue where I can see the correct response in Firebug, but I'm unable to access the data it returns. I need some guidance on how to achieve this. Specifically, I'm attempting to place the timestamp of an entry into a div ...

javascriptphpjqueryajaxjsonp