In Vue js, where is the best place to incorporate something similar to a 'base.html' template?

My transition from a Flask backend without a front end framework to Vue.js (with no chosen backend yet) has me considering how to structure my project. Previously, I would create a 'base.html' file that contained all the necessary HTML code, dependencies like stylesheets and JavaScript libraries, as well as common website components such as the navigation bar and background image. Using Jinja2 templating language, I would extend 'base.html' in every subsequent page.

With Vue.js, I am unsure of where to place this type of 'base.html' code in my project. The file structure of my Vue.js project, created using Vue CLI, is displayed here:

https://i.stack.imgur.com/Vg0ay.png

I am considering either putting the contents of 'base.html' in the index.html file (at the bottom of the picture) or within the template of the src/App.vue file. However, I am open to exploring other possible approaches that may better suit the requirements of my Vue.js project.

Answer №1

If you have a background in Flask for backend development, I recommend sticking with it and using Vue for your frontend.

With that said, there are numerous great examples of how to seamlessly integrate Flask with Vue. One interesting example can be found on GitHub: flask-vuejs-template.

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

Searching for "unique elements" using AngularJS ng-repeat

I am trying to organize a list by category, but the challenge is that each category input is customized and can be added by any user in the list. My initial attempt involved using ng-repeat to filter out duplicate values (as seen in the code snippet uniqu ...

Attempting to retrieve the position of an image within an array upon clicking

function displayGalleryIndex(){ console.log($(this).index()); } $("body").on( "click", "#gallery img", displayGalleryIndex); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="grid- ...

The integration between React.js, Node.js, and Express.js is facing issues with the socket.io functionality

I am currently working on integrating socket.io with React.js, running the socket.io on a backend server using Express.js. One issue I am facing is that when an order is placed on the homepage, it should be displayed in real-time on the Orders page in Rea ...

What are the consequences of submitting a form to a different website through POST method?

Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...

Spinning an object using JQuery

I am currently working on a project to test my skills. I have set up a menu and now I want to customize it by rotating the icon consisting of three vertical lines by 90 degrees every time a user clicks on it. This icon is only visible on smartphones when t ...

Changing color of entire SVG image: a step-by-step guide

Check out this SVG image I found: https://jsfiddle.net/hey0qvgk/3/ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" width="90" height="9 ...

What is the syntax for creating ES6 arrow functions in TypeScript?

Without a doubt, TypeScript is the way to go for JavaScript projects. Its advantages are numerous, but one of the standout features is typed variables. Arrow functions, like the one below, are also fantastic: const arFunc = ({ n, m }) => console.log(`$ ...

Angularjs Error Message: Syntax Parsing Issue

Being new to AngularJS, I am trying to grasp the error messages displayed in the console. Below are my JSON object and other details for reference. In the JSP page: <body id="bodyID" ng-controller="ApplicationParameterController" > <div ng-c ...

The functionality of the "Slots" prop has no impact when used on the material-ui Slider component

Trying to understand the purpose of the "slots" prop in relation to customizing how inner components like track and thumb are rendered within the Slider component. A basic example of rendering a Slider component is shown below const marks = [ { value: 0 ...

Using Vuetify timepicker to update model value

I have integrated the Vuetify timepicker into my project, but I am facing an issue where the selected time is not updating the model. How can I ensure that the model gets updated when a time is selected? The component that is utilizing the timepicker is a ...

Changing the color of text in an HTML input field using CSS and JavaScript depending on the input value

Looking for a solution! // Getting user input values var input1 = parseInt(document.getElementById("input1").value); var input2 = parseInt(document.getElementById("input2").value); var input3 = parseFloat(document.getElementById(" ...

What is the purpose of encasing the routes within the <Switch> element in react-router, when they seem to function perfectly fine without it

Currently utilizing react-router-dom version 5.2.0. As a practice, I typically enclose all my Route components within a Switch component. For instance: const MyRoutes = () => ( <Switch> <Route path='/route1' exact ...

Infinite Vue.js Scrolling: Elevate Your Web

Do you know of any directive that can be used to implement Ajax infinite scroll with vue.js? Or is there a directive already available for this purpose? Your assistance would be highly appreciated. ...

After the installation of Windows 10 and the latest version of NodeJS, Gatsby seems to be

The gatsby project I set up following the official website instructions seems to be malfunctioning. NodeJS version: v16.15.0, npm version: 8.8.0, gatsby version: 4.13.0, gatsby CLI version: 4.13.0 C:\Users\Dell\Desktop\New folder&bsol ...

How to properly log out a user in Vue.js?

Hey there, Currently, I am working with the combination of Laravel and VueJS, but I seem to be facing an issue regarding disconnection. For instance: If I log out from one tab and then switch to another tab, I find that I am still able to carry out actio ...

Error encountered when entering a value in the Material UI keyboard date picker

When I select a date by clicking on the calendar, it works fine. However, if I initially set the date to empty and then type in the date, it does not recognize the format and displays numbers like 11111111111111111111. This breaks the date format. If I sel ...

The challenge of handling Set type in TypeScript errors

I'm currently facing two errors while trying to convert a function to TypeScript. The issue lies with the parameters, which are of type Set import type {Set} from 'typescript' function union<T>(setA: Set<T>, setB: Set<T>) ...

When using EventBus in Vue.js with dynamic elements, the $off method removes event listeners for all reused components at once, rather

I am encountering an issue with a dynamically generated component that can be mounted multiple times on a page simultaneously. When there are 10 food items returned from a feed, there are 10 components created. Each FoodItem component has its own event bus ...

"An error occurred with the Google chart due to 'null' not being recognized as an object, specifically in relation to the select menu and onchange event

Currently, I have implemented the following Script: <header> <script type="text/javascript" src="http://www.google.com/jsapi"></script> </header> <body> <script type="text/javascript"> google.load("visualization", "1 ...

How can I continuously trigger the expand transition of a v-card by pressing a button?

I'm currently working on a form where users can click a button to reveal a new v-card. While everything is functioning properly, I am having trouble implementing a smooth expand transition. The transition works for the first card, but then prompts me ...