## ✅ 1. Preventing `{{ }}` Interference Between Blade and Vue

Both Blade and Vue use `{{ }}` for data binding → this is the root cause of the conflict.

### ✔ Best Practice:

Change the Vue delimiters:

```html
<script>
new Vue({
  el: '#app',
  delimiters: ['[[', ']]'],
  data: {
    name: 'Ali'
  }
})
</script>

```

```html
<div id="app">
  [[ name ]]
</div>

```

📌 **From now on:**

* `{{ }}` is reserved exclusively for Blade.
* `[[ ]]` is reserved exclusively for Vue.

---

## ✅ 2. Always Scope Vue to a Specific Container

❌ **Bad:**

```html
<div>
  <p>[[ name ]]</p>
</div>

```

✔ **Good:**

```html
<div id="app">
  <p>[[ name ]]</p>
</div>

```

📌 This ensures Vue does not interfere with the entire Blade page.

---

## ✅ 3. Conditional Rendering → Vue Only, Not Blade

❌ **Common Mistake:**

```blade
@if($user)
  <p>[[ name ]]</p>
@endif

```

✔ **Correct:**

```html
<p v-if="user">[[ name ]]</p>

```

📌 Display Logic = Vue
📌 Server Logic = Blade

---

## ✅ 4. Use `v-for` for Lists Only

❌ **Bad:**

```blade
@foreach($items as $item)
  <li>[[ item.name ]]</li>
@endforeach

```

✔ **Correct:**

```html
<li v-for="item in items" :key="item.id">
  [[ item.name ]]
</li>

```

📌 Data flow: Laravel → JSON → Vue

---

## ✅ 5. Inject Laravel Data into Vue Only Once

✔ **Secure Standard:**

```blade
<script>
window.appData = @json($data);
</script>

```

```html
<script>
new Vue({
  el: '#app',
  data: {
    items: window.appData.items
  }
})
</script>

```

📌 Avoid printing Blade variables directly inside Vue-controlled HTML.

---

## ✅ 6. Printing Raw Text vs. HTML

| Goal | Syntax |
| --- | --- |
| Safe Text Output | `[[ text ]]` |
| Actual HTML | `v-html="htmlContent"` |

❌ **Incorrect:**

```html
<p>[[ htmlText ]]</p>

```

✔ **Correct:**

```html
<p v-html="htmlText"></p>

```

⚠️ **Warning:** Only use this when the source is trusted.

---

## ✅ 7. Use Vue Events, Not Inline JS

❌ **Bad:**

```html
<button onclick="doSomething()">Click</button>

```

✔ **Correct:**

```html
<button @click="doSomething">Click</button>

```

---

## ✅ 8. Essential Separation of Concerns (Golden Rule)

| Task | Responsibility |
| --- | --- |
| Initial Page Rendering | Blade |
| UI Interactions | Vue |
| Conditionals & Loops | Vue |
| Data Retrieval | API or JSON |
| Layout Construction | Blade |

---

## ✅ 9. Recommended Clean Structure (Blade + Vue CDN)

```blade
<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">
      [[ item.title ]]
    </li>
  </ul>

  <button @click="addItem">Add</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  delimiters: ['[[', ']]'],
  data: {
    items: window.appData.items
  },
  methods: {
    addItem() {
      this.items.push({ id: Date.now(), title: 'New Item' })
    }
  }
})
</script>

```

---

## 10. Rules to Provide
> * In Blade + Vue2 CDN setups, always set delimiters to `[[ ]]`.
> * Never write `@if` or `@foreach` inside a Vue template.
> * Use `[[ ]]` for all data output.
> * Data should only be sourced from `window.appData`.
> * Never use `onclick` or inline JS.
> * Ensure Vue only executes within the `#app` scope.