CODEWITHSUNDEEP
vue.jsvuejs2vue-router
Paddy
Paddy

Reputation: 1

How can I use one of my vue instances to be loaded in a separate html page

Currently my web application is loaded like this in index.html -

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>tempo</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

and the ID of 'app' is my main vue instance (see below)-

var spa = new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
})

I am trying to have a second html page (live.html) that will hold the vue instance of -

var outer = new Vue({
  el: '#outer',
  router,
  store,
  template: '<Live/>',
  components: { Live },
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>tempo</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer"></div>
</body>
</html>

Both these vue instances are located in my main.js - But only the 'App' instance is being loaded, I i change my url to 'localhost:8080/live.html' nothing appears.

If I move the id="outer" to my index.html it will load, but my aim is to have it load on a separate html file so that its components can be displayed separately, but may be able able to communicate using vuex for the rest of the SPA.

Any pointers in the right direction is greatly appreciated and if any clarification is needed, please ask.

Upvotes: 0

Views: 237

Answers (1)

Jeff
Jeff

Reputation: 25221

Here's what I had in mind:

const router = new VueRouter({
    routes: [
        { 
            path: '/livedisplay', 
            component: Live 
        },
        { 
            path: '/', 
            component: Main,
            children: [
                { 
                    path: '/', 
                    component: Home
                },
                { 
                    path: '/about', 
                    component: About
                },

            ] 
        },
    ]
})

Your menu and navigation would be within the "Main" component

Upvotes: 0

Related Questions