Svelte V2 Snippets

The essential collection of Svelte V2 Snippets.

Snippets

Full Expansions

svscript - Svelte Script

<script>
  export default {
    data(){
      return {
        |
      }
    }
  }
</script>

svscriptfull - Svelte Script Extended

<script>

  import | from '|';

  export default {
    components:{
      |
    },
    computed:{
      |: ({|}) => |
    },
    data(){
      return {
        |
      }
    },
    oncreate(){
      var self = this;
      |
    },
    methods: {
      |
    }
  }
</script>

svexport - Svelte Export

  export default {
    data(){
      return {
        |
      }
    }
  }

svexportfull - Svelte Export Extended

  import | from '|';

  export default {
    components:{
      |
    },
    computed:{
      |: ({|}) => |
    },
    data(){
      return {
        |
      }
    },
    oncreate(){
      var self = this;
      |
    },
    methods: {
      |
    }
  }

svif - Svelte Script

  {#if }

  {:elseif}

  {:else}

  {/if}

svif - Svelte if block

  {#if |}
    |
  {/if}

svifelse - Svelte if else block

  {#if |}
    |
  {:else}
    |
  {/if}

svif - Svelte if else if block

  {#if |}
    |
  {:elseif}
    |
  {:else}
    |
  {/if}

sveach - svelte each block

  {#each | as |}
    |
  {/each}

sveachelse - svelte each else block

  {#each | as |}
    |
  {:else}
    |
  {/each}

svoncreate - svelte oncreate lifecycle method

  oncreate(){
    var self = this;
    |
  }

svonstate - svelte onstate lifecycle method

  onstate({changed, current, previous}){
    var self = this;
    |
  }

svonupdate - svelte onupdate lifecycle method

  onupdate({changed, current, previous}){
    var self = this;
    |
  }

svondestroy - svelte ondestroy lifecycle method

  ondestroy(){
    var self = this;
    |
  }

svevent - svelte event

  this.on('|', (|) => {
    |
  });

svonstateevent - svelte state event

  this.on('state', ({changed, current, previous}) => {
    |
  });

svonupdateevent - svelte update event

  this.on('update', ({changed, current, previous}) => {
    |
  });

svcomputed - svelte computed properties wrapper

  computed: {
    |: ({|}) => |
  },

svmethods - svelte methods wrapper

  methods: {
    |(){
      |
    }
  },

svcomponents - svelte components wrapper

  components: {
    |
  },

svhelpers - svelte helpers wrapper

  helpers: {
    |
  },

svget - svelte get method

  this.get()|;

svgetd - svelte get method with declaration

  var {|} = this|.get();

svset - svelte set method

  this.set({ | : | });