Vue એપ્લિકેશન બનાવવી ​

એપ્લિકેશન ઇન્સ્ટન્સ ​

દરેક Vue એપ્લિકેશન createApp ફંક્શન સાથે નવો એપ્લિકેશન ઇન્સ્ટન્સ (application instance) બનાવીને શરૂ થાય છે:

import { createApp } from 'vue'

const app = createApp({
  /* રૂટ કમ્પોનન્ટ ઓપ્શન */
})

રૂટ કમ્પોનન્ટ ​

createApp માં આપણે જે ઓબ્જેક્ટ પાસ કરીએ છીએ તે ખરેખર એક ઘટક (component) છે. દરેક એપને એક "રૂટ કમ્પોનન્ટ (root component)" ની જરૂર હોય છે જે તેના બાળકો (children) તરીકે અન્ય કમ્પોનન્ટ્સ ધરાવી શકે છે.

જો તમે સિંગલ-ફાઇલ કમ્પોનન્ટ્સ (Single-File Components) નો ઉપયોગ કરી રહ્યાં છો, તો અમે સામાન્ય રીતે રૂટ કમ્પોનન્ટને બીજી ફાઇલમાંથી ઇમ્પોર્ટ કરીએ છીએ:

import { createApp } from 'vue'
// સિંગલ-ફાઇલ કમ્પોનન્ટમાંથી રૂટ કમ્પોનન્ટ App ઇમ્પોર્ટ કરો.
import App from './App.vue'

const app = createApp(App)

ભલે આ માર્ગદર્શિકાના ઘણા ઉદાહરણોને ફક્ત એક જ કમ્પોનન્ટની જરૂર હોય, પણ મોટાભાગની વાસ્તવિક એપ્લિકેશનો નેસ્ટેડ (nested), પુનઃઉપયોગ કરી શકાય તેવા કમ્પોનન્ટ્સના ટ્રી (tree) માં ગોઠવાયેલી હોય છે. ઉદાહરણ તરીકે, Todo એપ્લિકેશનનો કમ્પોનન્ટ ટ્રી કંઈક આના જેવો દેખાઈ શકે છે:

App (રૂટ કમ્પોનન્ટ)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

માર્ગદર્શિકાના પછીના વિભાગોમાં, આપણે એકસાથે બહુવિધ કમ્પોનન્ટ્સને કેવી રીતે વ્યાખ્યાયિત કરવા અને કમ્પોઝ કરવા તેની ચર્ચા કરીશું. તે પહેલાં, આપણે એક જ કમ્પોનન્ટની અંદર શું થાય છે તેના પર ધ્યાન કેન્દ્રિત કરીશું.

એપને માઉન્ટ કરવું ​

એપ્લિકેશન ઇન્સ્ટન્સ જ્યાં સુધી તેની .mount() મેથડ કૉલ કરવામાં ન આવે ત્યાં સુધી કંઈપણ રેન્ડર કરશે નહીં. તે "કન્ટેનર" આર્ગ્યુમેન્ટની અપેક્ષા રાખે છે, જે કાં તો વાસ્તવિક DOM એલિમેન્ટ અથવા સિલેક્ટર સ્ટ્રિંગ (selector string) હોઈ શકે છે:

<div id="app"></div>

app.mount('#app')

એપના રૂટ કમ્પોનન્ટની સામગ્રી કન્ટેનર એલિમેન્ટની અંદર રેન્ડર કરવામાં આવશે. કન્ટેનર એલિમેન્ટ પોતે એપનો ભાગ માનવામાં આવતો નથી.

બધા એપ કોન્ફિગરેશન અને એસેટ રજીસ્ટ્રેશન (asset registrations) પૂર્ણ થયા પછી જ .mount() મેથડ હંમેશા કૉલ કરવી જોઈએ. એ પણ નોંધો કે તેનું રિટર્ન મૂલ્ય, એસેટ રજીસ્ટ્રેશન મેથડ્સથી વિપરીત, એપ્લિકેશન ઇન્સ્ટન્સને બદલે રૂટ કમ્પોનન્ટ ઇન્સ્ટન્સ છે.

In-DOM રૂટ કમ્પોનન્ટ ટેમ્પલેટ ​

રૂટ કમ્પોનન્ટ માટેનું ટેમ્પલેટ સામાન્ય રીતે કમ્પોનન્ટનો જ ભાગ હોય છે, પરંતુ ટેમ્પલેટને માઉન્ટ કન્ટેનરની અંદર સીધું લખીને અલગથી પ્રદાન કરવું પણ શક્ય છે:

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

જો રૂટ કમ્પોનન્ટ પાસે પહેલેથી જ template ઓપ્શન ન હોય તો Vue આપોઆપ કન્ટેનરની innerHTML ને ટેમ્પલેટ તરીકે ઉપયોગ કરશે.

In-DOM ટેમ્પલેટ્સનો ઉપયોગ ઘણીવાર એવી એપ્લિકેશનોમાં થાય છે જે બિલ્ડ સ્ટેપ વિના Vue નો ઉપયોગ કરી રહી છે. તેનો ઉપયોગ સર્વર-સાઇડ ફ્રેમવર્ક સાથે પણ થઈ શકે છે, જ્યાં રૂટ ટેમ્પલેટ સર્વર દ્વારા ગતિશીલ રીતે જનરેટ કરવામાં આવી શકે છે.

એપ કોન્ફિગરેશન ​

એપ્લિકેશન ઇન્સ્ટન્સ એક .config ઓબ્જેક્ટ એક્સપોઝ કરે છે જે આપણને થોડા એપ-લેવલ ઓપ્શન્સને કોન્ફિગર કરવાની મંજૂરી આપે છે, ઉદાહરણ તરીકે, એપ-લેવલ એરર હેન્ડલર (error handler) વ્યાખ્યાયિત કરવું જે તમામ વંશજ ઘટકો (descendant components) માંથી ભૂલોને કેપ્ચર કરે છે:

app.config.errorHandler = (err) => {
  /* ભૂલ હેન્ડલ કરો */
}

એપ્લિકેશન ઇન્સ્ટન્સ એપ-સ્કોપ્ડ એસેટ્સને રજીસ્ટર કરવા માટે કેટલીક મેથડ્સ પણ પ્રદાન કરે છે. ઉદાહરણ તરીકે, કમ્પોનન્ટ રજીસ્ટર કરવું:

app.component('TodoDeleteButton', TodoDeleteButton)

આ આપણી એપમાં ક્યાંય પણ વાપરવા માટે TodoDeleteButton ને ઉપલબ્ધ કરાવે છે. અમે માર્ગદર્શિકાના પછીના વિભાગોમાં કમ્પોનન્ટ્સ અને અન્ય પ્રકારની એસેટ્સ માટે રજીસ્ટ્રેશનની ચર્ચા કરીશું. તમે API સંદર્ભ માં એપ્લિકેશન ઇન્સ્ટન્સ API ની સંપૂર્ણ સૂચિ પણ બ્રાઉઝ કરી શકો છો.

એપને માઉન્ટ કરતા પહેલા તમામ એપ કોન્ફિગરેશન લાગુ કરવાની ખાતરી કરો!

એકથી વધુ એપ્લિકેશન ઇન્સ્ટન્સ ​

તમે સમાન પૃષ્ઠ પર એક જ એપ્લિકેશન ઇન્સ્ટન્સ સુધી મર્યાદિત નથી. createApp API એક જ પૃષ્ઠ પર બહુવિધ Vue એપ્લિકેશનોને સહ-અસ્તિત્વમાં રહેવાની મંજૂરી આપે છે, જેમાંના દરેકનો કોન્ફિગરેશન અને ગ્લોબલ એસેટ્સ માટે પોતાનો સ્કોપ (scope) હોય છે:

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

જો તમે સર્વર-રેન્ડર્ડ HTML ને બહેતર બનાવવા માટે Vue નો ઉપયોગ કરી રહ્યાં છો અને કોઈ મોટા પૃષ્ઠના ચોક્કસ ભાગોને નિયંત્રિત કરવા માટે જ Vue ની જરૂર છે, તો આખા પૃષ્ઠ પર સિંગલ Vue એપ્લિકેશન ઇન્સ્ટન્સ માઉન્ટ કરવાનું ટાળો. તેના બદલે, બહુવિધ નાના એપ્લિકેશન ઇન્સ્ટન્સ બનાવો અને તેમને તે એલિમેન્ટ્સ પર માઉન્ટ કરો જેના માટે તેઓ જવાબદાર છે.