Steps for integrating external components into Laravel 5.3 with VueJs Routes

I am currently working with Laravel 5.3 and utilizing the built-in VueJs components.

At this point, my goal is to implement routes into my project. I have attempted to use the following code, but unfortunately, it is not functioning as expected.

const NotFound = { template: '<p>Page not found</p>' }
const Page1 = { template: '<p>home page</p>' }
const Page2 = { template: '<p>about page</p>' }
const routes = {
  '/': Page1,
  '/page2': Page2
}

const app = new Vue({
    el: '#app',
    data: {
        currentRoute: window.location.pathname
    },
    computed: {
        ViewComponent () {
          return routes[this.currentRoute] || NotFound
        }
    },
    render (h) { return h(this.ViewComponent) }
});

How can I import Example.vue instead of using Page1?

I attempted to use

require('./components/Example.vue')
, but it did not work as expected. Any guidance on how to resolve this issue would be greatly appreciated.

Answer №1

Consider incorporating vue-router into your project.

  const router = new VueRouter({
  mode: 'history',
  base: '/',
  routes: [
    { path: '/demo',name: 'demo', component: require('./demo/demo.vue') }

  ]
})

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

Error: monaco has not been declared

My goal is to integrate the Microsoft Monaco editor with Angular 2. The approach I am taking involves checking for the presence of monaco before initializing it and creating an editor using monaco.editor.create(). However, despite loading the editor.main.j ...

Traversing an array of objects using D3.js

I'm attempting to create a row of bars that are all the same height and width based on their titles. I have an array of 100 objects, each with a key called results containing another array of 20 objects. This means I should end up with a row of 2000 b ...

The attribute "property" is not found in the specified type of "Request<ParamsDictionary>"

Struggling to enhance the Request interface in the express package with custom properties, I keep encountering this TypeScript error: TS2339: Property '' does not exist on type 'Request<ParamsDictionary>'. Any ideas on how to re ...

Is my Bootstrap malfunctioning? The grid system seems to be malfunctioning

My very first question here is quite simple. I have a script that creates rows with dynamic content by appending 4 boxes (columns) in one row and then appending the row to the container. After completing this process, it appends the container to the main c ...

Sending data to a Bootstrap modal dialog box in an Angular application

Using span and ng-repeat, I have created tags that trigger a modal pop-up when the remove button is clicked. Within this modal, there is a delete button that calls a function. I am trying to figure out how to pass the id of the remove button to the modal ...

Is it possible to create an online game using JavaScript?

Hey there, I'm interested in creating a simple online game that can be played in the browser. My main question is this: if I want two players to compete against each other online, can I achieve this by using HTML for the front-end and JavaScript for t ...

Tips for obtaining the identifier of a div element while employing the bind() function in jQuery

Imagine having the following div. <div id="456" class="xyz">Lorem Ipsum</div> If I want to execute a function when this specific div is hovered over, I can achieve it like this: $(".xyz").bind({ mouseenter : AnotherFunction(id) }); Prio ...

Is there a way to cancel a fetch request and initiate a new one right away?

Below is an illustration taken from MDN. The example showcases two buttons - one for sending a request and the other for canceling it. var controller = new AbortController(); var signal = controller.signal; var downloadBtn = document.querySelector(&apos ...

Navigating through Vue.js 2 - A guide to establishing event buses within single file component structures

In my quest for a solution, I stumbled upon a clever idea by LinusBorg discussed here. This approach involves registering a bus globally in any Vue instance. However, I am curious if it's possible to implement this functionality within a component hie ...

Encountering issues while trying to run Nuxt locally with HTTPS due to a problem with the n

Currently, my objective is to run nuxt locally with HTTPS in order to test some geolocation functionalities. (https://nuxtjs.org/, https://nuxtjs.org/api/nuxt) I have been following a tutorial available at: In addition, I came across this resource as wel ...

What steps should be taken to resolve the error message "EROFS: read-only file system, attempting to open '/var/task/db.json'?"

const jsonServer = require('json-server') const cors = require('cors') const path = require('path') const server = jsonServer.create() const router = jsonServer.router(path.join(__dirname, 'db.json')) const middlewa ...

Is it a good idea to separate the API and Frontend in React and Laravel?

After gaining a solid understanding of React and Laravel, I am confident in my ability to create a Laravel app by utilizing the following command: laravel new MyApp I can then set the preset to include React with the command: php artisan preset reac ...

Tips for aligning meshes to the left and ensuring responsiveness in three.js

Currently working on a website using three.js, I'm facing an issue where I can't seem to align and make the mesh responsive simultaneously. My current approach to alignment is: cube.position.x = -20 However, when I try resizing the window, the m ...

Increasing the ID of a select input using Jquery

Is there a way to modify the identification of my select field? This select option is dynamically created using PHP. The select input can be accessed through var indirectSelect Despite its simplicity, I am facing difficulty in changing it. I attempted th ...

Utilize JQuery to inject both standard HTML elements and safely rendered escaped HTML onto a webpage

After storing some data in firebase that can be retrieved on the client side, I use JQuery to add it to the HTML. Although the process of prepending the data to the DOM element is straightforward, there is a security concern as raw code can make the applic ...

A guide to incorporating VueSweetalert2 into your Quasar Project

I'm having trouble setting up a Sweetalert2 modal to pop up. I used npm i vue-sweetalert2 to install it, but I'm encountering two errors. One says "The "VueSweetalert2" component has been registered but not used." and the other indicates that thi ...

Differences between HTTP request errors and response errors(Note: This

Currently, I am researching $http interceptors and noticed that there are requestError and responseError functions available. 1) Can you explain the distinction between requestError and responseError? 2) Under what circumstances does requestError get t ...

Creating a visual representation of data using Google Charts to display a stacked bar chart

I wrote a script to display a stacked Google chart using JSON data stored on the wwwroot directory - <html> <head> <title>DevOps Monitoring Application</title> <link rel="icon" type="image/png" hr ...

Images are failing to show up in the iPhone design

Encountering issues with displaying images on an iPhone? You can replicate the problem by minimizing your browser window horizontally. Here is a link showcasing the problem: here. To temporarily fix this, try zooming out the browser (Ctrl+-). You can see a ...

Navigating with Node.js: Understanding how to showcase the response data within a list structure

I am brand new to working with node.js and I'm looking to display the data I receive as a response on my webpage. Currently, I can see the output in my console. Is there a way to show this data on my actual page? GET Request: app.get('/bestell_ ...