Using framework7 core and vue.js vanilla

1

Hi,
Is it possible to use framework7 core and vue.js vanilla, it seems to me that there is an issue of using the same #app id when trying to initialize both, it works on the browser but not on android.

Thanks

2

what do yo mean with f7 + vue vanilla?
you dont want to use f7-cli?

you can import the modules that you need:
https://framework7.io/vue/package.html

here is the app layout, note that there is only one tag with #app
https://framework7.io/vue/app-layout.html

and
https://framework7.io/vue/init-app.html

3

Hi
I am referring to using f7 core syntax https://framework7.io/docs/app.html
And vanilla from vuejs.org
Rather than framework7-vue syntax (which has vue baked into it)

4

hmm i tried once, and didnt work. i end up using f7 + vue. but using only f7 sintax not f7-vue
so instead of writing this:

  <f7-row>
    <f7-col>
      <f7-button>Button</f7-button>
    </f7-col>
    <f7-col>
      <f7-button>Button</f7-button>
    </f7-col>
    <f7-col>
      <f7-button round>Round</f7-button>
    </f7-col>
  </f7-row>

i write like f7 without vue

  <div class="row">
    <button class="col button button-fill">Button</button>
    <button class="col button button-fill">Button</button>
    <button class="col button button-fill button-round">Round</button>
  </div>

its this what you need?

1 Like
5

Yes, exactly!
How did you initialize the #app in vue/f7 in the js file

6

before f7 cli i did it manually. now i use f7-cli. and just write f7 syntax without f7-vue

7

Got it thanks, do you use vue.js syntax or only framework7 css/html/js

8

i think 98% or more its framwrork7.
my client ask for a native look and feel app. then he want to make changes to look more like he’s company, so this minimal changes are tricky to achieve in vuejs syntax, that’s why i use f7. since the component is rendered and you have de names of the classes its easier for me to modify them