Integrating with an existing project.

[Usama Saddiq]

Hey,

I am already in the middle of one of our projects using Vue + Laravel.

I was interested in Integrating the pro paper dashboard version so that I can re-use it's components instead of working around the template. We have an app with alot of features and re-implementing those seems like an overkill.

I am using the current code to just render a simple Sidebar and a TopBar
Template:
`

  <top-navbar></top-navbar>

</div>

Script:
import Vue from 'vue'

   //note I put the components in a dahsBoardLayout directory
   import Sidebar from './../dashboardLayout/UIComponents/SidebarPlugin/index'

   Vue.use(Sidebar)

   import TopNavbar from './../dashboardLayout/Dashboard/Layout/TopNavbar.vue'

    export default{
	components : {
		TopNavbar
	},
	data(){
	    return {
	      links: [{
                     name : Link1
                     isRoute : false
                  }]
	}
}

`

The following code has two issues which I am facing at the moment:

The first one is this screenshot

The second one seems to be like it can't find the $sidebar object but I am not sure where and how to reference it?

I would love any feedback or any pointers in the right direction.

Cheers

[Cristi Jora]

Hi there

The first error is because async/await is not supported by your current configuration.
You have to install some babel presets in order for it work.
If you use laravel mix, install these babel presets and reference them in your config file laravel-mix/laravel-mix#1108

You can also see that these presets are used in this template as well https://github.com/cristijora/vue-paper-dashboard/blob/master/.babelrc

I think, now, with the latest babel dependency you could specify only one env preset instead of 2.
Regarding the sidebar, importing it's components, using it as a plugin Vue.use(Sidebar). Do you mind telling what version of Vue you use?

Regarding any other pointers if you want to integrate into an existing project, I can tell you that:

• You have to make sure your project supports loading sass files both in .vue files as well as importing sass files. You could get around with supporting only one of them but would be nice to have both.
• Make sure you import the necessary sass files. You could import them all clean up the ones you don't need or don't use.
• import bootstrap (version 3 for now) before the dashboard css
• If you want to add additional styles, add them in separate files and don't modify the paper-dashboard files as it will be easier to update them later on if anything is improved/changed on the template's side.

[Usama Saddiq]

Hey,

I am use Vue 2.0.

Regarding the second error it cannot find the $sidebar object smh in the TopNavbar component, it should be accessible globally according to the docs or maybe since sidebar isn't rendering yet it's not exposing that object globally?

Anyways, still trying to solve the issue although installed the babel presets and the transform plugin as well.

Any help would be appreciated!

[Usama Saddiq]

Okay managed to solve the issue with reviewing the main.js file and including the dependencies in my project as my .babelrc file was not upto the mark.

But one questions here, as my project is already using alot of elements that are overriden by the template such as dropdowns and select lists etc the CSS is being overrided by the template.

I know the template CSS is taking precedence but adding my own styles to my own components might break things?

Just curious.