kzima / vuestrap

Vuestrap Javascript wrapper for Bootstrap 4 components.
MIT License
105 stars 11 forks source link

Need some clarification... #4

Open masterpowers opened 8 years ago

masterpowers commented 8 years ago

Hi i manage to set up your vue-starter with laravel... Thanks for you Guidance....

I have just some question in my mind unanswered , and i would be kind of you if you can please enlighten my mind...

does vuestrap acts as the main boostrap.sass files?

coz i havent included it in my header tag and still i have styling almost the same as your starter app, except that search bar is not floated to the right and is beneath the navitems...

also the theme, what are the available variables i can include in it? in your example is $brand-primary if you have a list it would be awesome....

this is the sample of my index.js

import Vue from 'vue'
import rest from 'vue-resource'

import 'vuestrap/core'
import 'vuestrap/components/alert'
import 'vuestrap/components/card'
import 'vuestrap/components/nav'
import 'vuestrap/components/navbar' 
import 'vuestrap/components/jumbotron'
import 'vuestrap/components/labels'
import 'vuestrap/components/modal'

import card from 'vuestrap-base-components/src/components/card'
import {nav, navItem} from 'vuestrap-base-components/src/components/nav'
import navbar from 'vuestrap-base-components/src/components/navbar'
import badge from 'vuestrap-base-components/src/components/badge'
import jumbotron from 'vuestrap-base-components/src/components/jumbotron'
import alert from 'vuestrap-base-components/src/components/alert'
import modal from 'vuestrap-base-components/src/components/modal'

// import vs from 'vuestrap-base-components/src/components/'

Vue.use(rest);
new Vue({
  el: '#app',
  data: {
   notify: true,
   state: 'success'
  },
  components: {
    'vs-nav': nav,
    'vs-nav-item': navItem,
    'vs-navbar': navbar,
    'vs-card': card,
    'vs-alert': alert,
    'vs-badge': badge,
    'vs-jumbotron': jumbotron,
    'vs-modal': modal
  },
  methods: {
    //
  },
  ready() {
  // Sample Get Test for API using vue-resource
  this.$http({url: '/api/v1/test', method: 'GET'}).then(function (response) 
  {
      console.log(response.data)
  }, function (response) 
  {
      console.log(response.data)
  })
 },

})

Also if i use a partial from vuestrap lets say alert, then i also need to pull in the counterpart of it in vuestrap base components as the alert counter part right?

I wanna help out document your project...

Thanks a lot

li3p commented 7 years ago

Hi, @masterpowers . About the questions you asked :

  1. vuestrap is just a webpack wrapper for bootstrap source code. Since vuestrap-starter is based on webpack , so you dont need include the bootstrap's css and js in your header, webpack will include the necessary parts of it by parsing statically start from your entry js file.
  2. All customizable variables can be found in bootstrap/_variables.scss file.
  3. if you just wanna use some css styles of bootstrap by using standard HTML, then use vuestrap is enough; if wanna use some components in vue style (bootstrap using jQuery), then you need vuestrap-base-components.