title: Nuxt.js Role Based Rendering on Server
body: <p>I have two roles in my database. First one is Admin and second one is normal User. I have a page that shows users table to both Admin and normal User. However, for Admin I want to show a button that creates new user with email and password. I do not want to show this button to normal User. I want it to be done on server and I do not want to set isAdmin parameter to vuex states. Because if I set it to vuex state then I can easily change the data using vue devtools... Is there any solution to render conditionally. Not like this:</p>
  
  <pre><code>&lt;template&gt;   &lt;div&gt;
       &lt;b-table striped hover :items="getUserList"&gt;&lt;/b-table&gt;
       &lt;b-button v-if="isAdmin" variant="primary" size="lg" to="/add_user"&gt;+&lt;/b-button&gt;   &lt;/div&gt; &lt;/template&gt;
  
  &lt;script&gt; import { mapActions, mapGetters } from "vuex"; import axios from "axios";
  
  export default {   middleware: 'authorize-user',   methods: {
      async getUserList() {
        try {
          let res = await axios.post("/api/users");
          if (res &amp;&amp; res.data) {
            return res.data.users ? res.data.users : [];
          }
        } catch (e) {
          console.log("user fetch failed");
        }
      }   },   computed: {
      ...mapGetters(['isAdmin'])   } } &lt;/script&gt;
  </code></pre>